Hvad er de vigtigste anvendelsestilfælde for useRef?

Question

Accepted Answer

`useRef` returnerer en ændringsbar container `{ current: ... }`, der **vedvarer på tværs af renderinger**, men afgørende **ændring af den udløser IKKE en gengengivelse**. Der er to distinkte anvendelser:

## 1. Få adgang til en DOM-node

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

## 2. Holde en ændringsbar værdi mellem renderinger

Brug det til at huske noget uden at forårsage gengengivelser — timer-id'er, den tidligere værdi af en prop, en instans af et bibliotek:

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

## Den vigtigste forskel: 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
```

Så reglen er: **hvis brugergrænsefladen skal afspejle værdien, brug state; hvis det kun er "bag kulisserne" data, brug en ref.** Læsning/skrivning af `ref.current` under gengivelse frarådes (gør det i effects/handlers), fordi refs ikke spores af React's gengivelsescyklus.