React-хук useRef — это мощный инструмент для хранения значений между рендерами, которые не влияют на повторную визуализацию компонента. Этот хук часто используют для работы с DOM-элементами или для сохранения информации, которая должна оставаться неизменной между рендерами, но не должна вызывать их перерисовку.
Как работает useRef?
useRef возвращает объект с одним полем current. Это поле можно изменять напрямую, но изменение current не вызывает повторного рендера компонента. Важно помнить, что useRef — это не замена состоянию (useState), поскольку его обновления не вызывают визуализацию.
Когда использовать useRef?
Используйте useRef, когда нужно:
1. Хранить DOM-ссылки на элементы, чтобы взаимодействовать с ними напрямую
useRef часто используется для получения доступа к DOM-элементам напрямую. Это полезно, когда вам нужно управлять элементом вручную, например, установить фокус на input или прокрутить элемент.
2. Сохранять значение между рендерами, которое не влияет на интерфейс компонента
Если вам нужно сохранить какое-то значение между рендерами, но оно не должно инициировать повторную визуализацию, useRef — идеальное решение. Это может быть счетчик рендеров, таймер, предыдущие значения и другие данные, не влияющие на UI.
3. Избегать лишних рендеров, когда данные не должны их инициировать
Если данные не должны инициировать повторный рендер компонента, но вам нужно их где-то хранить, useRef — ваш выбор. Например, когда вы сохраняете информацию о предыдущем состоянии или отслеживаете значение, которое используется только в побочных эффектах.
Основные правила работы с useRef
1. Не изменяйте ref.current во время рендера, это нарушит концепцию «чистых» рендеров в React.
2. Не храните в useRef данные, влияющие на рендеринг компонента. Для этого используйте useState.
3. Изменения в current не вызывают перерисовку компонента.
Использование useRef на практике
Как сохранить значение с помощью useRef
Вот пример, как создать ссылку с помощью useRef, которая сохраняет значение между рендерами:
Как использовать useRef для работы с DOM
useRef отлично подходит для манипуляций с DOM-элементами. Например, можно легко фокусироваться на input-поле:
Как избежать перезаписи ref на каждом рендере
Когда вы работаете с объектами внутри useRef, важно избегать их повторного создания при каждом рендере. Пример ниже демонстрирует, как правильно инициализировать объект только один раз:
Как избежать проверок на null
Если объект внутри ref должен быть инициализирован только один раз, можно использовать функцию для его извлечения:
Проблемы при использовании с пользовательскими компонентами
Если вы хотите использовать ref с пользовательскими компонентами, не забудьте оборачивать их в forwardRef, иначе ref не будет работать:
Полезные советы по работе с useRef
- Для чего использовать useRef? Хранение DOM-ссылок, кэширование данных между рендерами, сохранение значений, не влияющих на интерфейс.
- Чего избегать: Не изменяйте ref.current во время рендеринга и не используйте useRef для состояния, влияющего на рендер.