Что такое Ref

Ref (сокращение от reference) в React — это способ получить прямой доступ к DOM-элементу или сохранить значение, которое не вызывает перерисовку компонента при изменении. Ref особенно полезен, когда нужно работать с элементами вне обычного потока данных через props и state.

Создание и использование

Для создания ref используется хук useRef:

const myRef = useRef(initialValue);

После этого myRef.current содержит текущее значение. При первом рендере myRef.current равно переданному начальному значению.

Чтобы привязать ref к DOM-элементу, передайте его в атрибут ref:

<input ref={myRef} />

Теперь myRef.current будет ссылаться на настоящий DOM-элемент <input>.

Отличие от состояния

Основное отличие useRef от useState:

  • Изменение ref.current не вызывает повторный рендер компонента.
  • ref предназначен для хранения данных, которые нужны между рендерами, но не влияют на то, как компонент выглядит.

Это делает ref идеальным для:

  • Хранения ссылок на таймеры, интервалы или внешние объекты
  • Сохранения предыдущих значений props или state
  • Прямого взаимодействия с DOM (фокус, измерение размеров, воспроизведение видео)

Когда использовать

Используйте ref, когда:

  • Нужно управлять фокусом, выделением текста или воспроизведением медиа
  • Требуется доступ к DOM-методам (например, scrollIntoView)
  • Необходимо хранить значение, которое не должно влиять на UI

Не используйте ref для данных, которые определяют внешний вид компонента — для этого подходит useState.

Использование useRef для DOM-элементов
Использование useRef для хранения значений
Ограничения и рекомендации