Как useRef используется для работы с DOM?

Question

useRef позволяет получить ссылку на DOM-элемент и обращаться к нему напрямую. Значение ref сохраняется между рендерами и не вызывает перерисовку при изменении. Это удобно для фокуса, измерений и интеграции с нативными API. useRef часто используют там, где состояние React избыточно. Он работает как контейнер для изменяемого значения.

YeaHub · Accepted Answer

Иногда React-состояние — не лучший инструмент, особенно когда нужно работать напрямую с DOM.Что такое useRefuseRef — это хук, который возвращает объект вида:{ current: ... }значение сохраняется между рендерамиизменение current не вызывает ререндерРабота с DOM-элементамиЧастый сценарий — доступ к реальному DOM-узлу.const inputRef = useRef(null)

useEffect(() => {
  inputRef.current.focus()
}, [])

return <input ref={inputRef} />
Такой подход используют для:установки фокусаскроллаизмерения размеров элементовработы с canvas или videouseRef как хранилище значенияПомимо DOM, useRef применяют для:хранения таймеровхранения предыдущих значенийфлагов, не влияющих на UIКогда useRef предпочтительнее useStateзначение не участвует в рендеречастые измененияважно избежать лишних перерисовокВыводuseRef — это безопасный способ работать с DOM и хранить изменяемые значения без влияния на рендеринг компонента.