Использование React Refs и хука useRef

React использует декларативный подход. Вы обновляете состояние, и React обновляет UI. Это подходит для большинства задач.

Но иногда нужно выйти за пределы Virtual DOM. Вам может потребоваться напрямую взаимодействовать с реальным HTML-элементом. Именно здесь на помощь приходят Refs и хук useRef.

Что такое Ref?

Ref — это указатель. Он напрямую связывает React с нативным DOM-узлом.

Почему стоит использовать useRef вместо useState?

Обновление состояния (state) вызывает ререндер. Это означает, что React перерисовывает компонент на экране. Обновление Ref не вызывает ререндер. Это делает их идеальными для значений, которые меняются, но не должны немедленно отображаться в UI.

Распространенные сценарии использования:

• Автоматическая установка фокуса на поле ввода. • Управление видео- или аудиоэлементами (play/pause). • Измерение ширины или высоты элемента. • Хранение ID таймеров для интервалов (intervals) или таймаутов (timeouts).

Как использовать useRef:

  1. Импортируйте useRef из React.
  2. Инициализируйте его: const myRef = useRef(null).
  3. Привяжите его к элементу: <input ref={myRef} />.
  4. Получайте доступ к значению через: myRef.current.

Пример 1: Автоматическая установка фокуса на input

Когда пользователь заходит на страницу, вы хотите, чтобы курсор сразу оказался в текстовом поле. Вы используете useEffect, чтобы вызвать myRef.current.focus() после монтирования компонента.

Пример 2: Секундомер

Если вы храните ID setInterval в состоянии (state), компонент будет перерисовываться при каждом тике таймера. Это медленно. Если же хранить ID в ref, компонент будет работать быстро. Значение сохраняется между ререндерами, не создавая лишней нагрузки на браузер.

State против Ref:

• State: Вызывает ререндер. Используется для данных UI. Обновления происходят асинхронно. • Ref: Не вызывает ререндер. Используется для доступа к DOM и хранения данных в памяти. Обновления происходят синхронно.

Советы для опытных разработчиков (Pro Tips):

• Избегайте чрезмерного использования. Используйте refs только тогда, когда декларативной логики недостаточно. • Освобождайте память. Всегда очищайте интервалы или слушатели событий (event listeners) в вашей функции очистки (cleanup function). • Не записывайте значения в refs во время рендеринга. Обновляйте ref.current только внутри useEffect или обработчиков событий. Это предотвращает побочные эффекты (side effects). • Используйте forwardRef. Если вы хотите передать ref в кастомный дочерний компонент, вы должны обернуть этот компонент в React.forwardRef.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde