Как работает useRef хук в React и для чего он используется

Что проверяют

Понимаете ли вы, что useRef это ящик, переживающий рендеры, и что его изменение не вызывает перерисовку. Отсюда два разных применения, которые часто путают.

Как отвечать

useRef(initial) возвращает объект { current }, один и тот же на всё время жизни компонента. Записать в current можно что угодно и когда угодно, и React на это никак не отреагирует.

Применений два:

1. Ссылка на DOM-узел.

const inputRef = useRef(null);
useEffect(() => inputRef.current?.focus(), []);
return <input ref={inputRef} />;

2. Значение между рендерами без перерисовки: идентификатор таймера, предыдущее значение пропа, флаг «первый рендер», объект наблюдателя.

const timer = useRef(null);
const start = () => { timer.current = setInterval(tick, 1000); };
const stop = () => clearInterval(timer.current);

Разница с состоянием: useState вызывает перерисовку и его значение попадает в разметку, useRef не вызывает и в разметку не идёт. Разница с обычной переменной: обычная пересоздаётся каждый рендер, ref живёт.

Где спотыкаются

Пишут в ref то, что должно быть на экране, и удивляются, что интерфейс не обновился.

Читают ref.current во время рендера ради DOM-узла: на первом рендере там ещё null, узел появляется только после монтирования.

Путают с forwardRef: он про передачу ссылки внутрь чужого компонента, а не про хранение значения. В React 19 ref можно принимать обычным пропом, и обёртка больше не нужна.