Как хук useRef используется для доступа к DOM-элементу? Какое ещё применение у него есть?

Что такое useRef и как он работает?

useRef — это хук React, который возвращает мутабельный объект ref с единственным свойством .current. Этот объект сохраняется на протяжении всего жизненного цикла компонента и не изменяется между рендерами. В отличие от useState, изменение ref.current не вызывает повторный рендер компонента.

Доступ к DOM-элементам

Основное применение useRef — получение прямого доступа к DOM-элементу. Это полезно для фокусировки ввода, анимаций, интеграции с библиотеками, которые работают напрямую с DOM.

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

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

  return <input ref={inputRef} type="text" />;
}

Хранение мутабельных значений

useRef также используется для хранения любых данных, которые должны сохраняться между рендерами, но не влиять на них. Например, для хранения идентификатора таймера, предыдущего значения пропса или экземпляра стороннего объекта.

import { useRef, useEffect, useState } from 'react';

function Timer() {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>{count}</div>;
}

Вывод

useRef — универсальный инструмент для работы с DOM и хранения мутабельных данных в React. Его стоит применять, когда нужно получить прямой доступ к элементу или сохранить значение без вызова ререндера, например, для таймеров, анимаций или интеграции с внешними библиотеками.