Vad är de viktigaste användningsområdena för useRef?

Question

Accepted Answer

`useRef` returnerar en muterbar behållare `{ current: ... }` som **persists mellan renderingar** men, vilket är avgörande, **att ändra den utlöser INTE en ny rendering**. Två distinkta användningar:

## 1. Åtkomst till en DOM-nod

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

## 2. Håll ett muterbart värde mellan renderingar

Använd det för att komma ihåg något utan att orsaka renderingar — timer ids, det tidigare värdet för en prop, en instans av ett bibliotek:

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

## Den viktiga skillnaden: 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å regeln är: **om användargränssnittet ska reflektera värdet, använd state; om det bara är "bakom kulisserna" data, använd en ref.** Det avråds att läsa/skriva `ref.current` under rendering (gör det i effects/handlers) eftersom refs inte spåras av Reacts renderingscykel.