Какие основные варианты использования useRef?

Question

Accepted Answer

`useRef` возвращает изменяемый контейнер `{ current: ... }`, который **сохраняется между рендерами**, но, что главное, **изменение его НЕ вызывает повторный рендер**. Два различных применения:

## 1. Доступ к DOM-узлу

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

## 2. Сохранение изменяемого значения между рендерами

Используйте его для запоминания чего-то без вызова рендеров — идентификаторы таймеров, предыдущее значение пропа, экземпляр библиотеки:

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

## Почему это важно: 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
```

Поэтому правило таково: **если UI должен отражать значение, используйте state; если это просто "фоновые" данные, используйте ref.** Чтение/запись `ref.current` во время рендера не рекомендуется (делайте это в effects/handlers), потому что refs не отслеживаются циклом рендера React.