Jakie są główne przypadki użycia dla useRef?

Question

Accepted Answer

`useRef` zwraca mutowalny kontener `{ current: ... }`, który **persystuje między renderami**, ale co ważne, **zmiana go NIE wyzwala re-rendera**. Dwa odrębne zastosowania:

## 1. Dostęp do węzła DOM

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

## 2. Trzymanie wartości mutowalnej między renderami

Użyj tego, aby zapamiętać coś bez powodowania renderów — id timerów, poprzednią wartość propsa, instancję biblioteki:

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

## Dlaczego to ważne

```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
```

Więc reguła jest: **jeśli interfejs powinien odzwierciedlać wartość, użyj state; jeśli to tylko dane "za kulisami", użyj ref.** Odczytywanie/pisanie `ref.current` podczas rendera jest odradzane (rób to w efektach/handlerach), ponieważ refs nie są śledzone przez cykl renderowania React'a.