Вопрос проверяет понимание того, как в React получают доступ к DOM-элементам и хранят изменяемые значения без перерендера.
useRef позволяет получить ссылку на DOM-элемент и обращаться к нему напрямую. Значение ref сохраняется между рендерами и не вызывает перерисовку при изменении. Это удобно для фокуса, измерений и интеграции с нативными API. useRef часто используют там, где состояние React избыточно. Он работает как контейнер для изменяемого значения.
Иногда React-состояние — не лучший инструмент, особенно когда нужно работать напрямую с DOM.
useRef — это хук, который возвращает объект вида:
{ current: ... }
значение сохраняется между рендерами
изменение current не вызывает ререндер
Частый сценарий — доступ к реальному DOM-узлу.
const inputRef = useRef(null)
useEffect(() => {
inputRef.current.focus()
}, [])
return <input ref={inputRef} />
Такой подход используют для:
установки фокуса
скролла
измерения размеров элементов
работы с canvas или video
Помимо DOM, useRef применяют для:
хранения таймеров
хранения предыдущих значений
флагов, не влияющих на UI
значение не участвует в рендере
частые изменения
важно избежать лишних перерисовок
useRef — это безопасный способ работать с DOM и хранить изменяемые значения без влияния на рендеринг компонента.