Wat zijn de belangrijkste use cases voor useRef?

Question

Accepted Answer

`useRef` retourneert een mutable container `{ current: ... }` die **behouden blijft over renders heen**, maar, cruciaal, **het wijzigen ervan VEROORZAAKT GEEN re-render**. Twee verschillende toepassingen:

## 1. Toegang tot een DOM-knooppunt

```jsx
function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // imperatively focus the input on mount
  }, []);
  return <input ref={inputRef} />;
}
```

## 2. Een mutable waarde tussen renders vasthouden

Gebruik het om iets te onthouden zonder renders te veroorzaken — timer ids, de vorige waarde van een prop, een instantie van een library:

```jsx
function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}
```

## Het belangrijkste onderscheid: ref vs state

```jsx
const countRef = useRef(0);
countRef.current++;  // changes the value, but the UI does NOT update

const [count, setCount] = useState(0);
setCount(count + 1); // changes value AND re-renders
```

De regel is dus: **als de UI de waarde moet weerspiegelen, gebruik state; als het alleen "achter de schermen" data is, gebruik een ref.** Het lezen/schrijven van `ref.current` tijdens renderen wordt afgeraden (doe het in effects/handlers) omdat refs niet worden bijgehouden door React's rendercyclus.