Что такое useRef в React и когда его использовать?

Что такое useRef в React и когда его использовать?

Определение useRef

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

Основная отличие от обычных переменных: значение в useRef не вызывает повторный рендер при изменении, и это значение не пересоздаётся при каждом рендере.

Основной синтаксис

const ref = useRef(initialValue);

Возвращает объект с единственным свойством .current, где хранится само значение.

Основные случаи использования

1. Работа с DOM элементами напрямую

• Фокусировка на input полях
• Управление медиа (видео, аудио) — play(), pause()
• Получение значений напрямую (без контроля через state)
• Измерение размеров элементов (offsetWidth, offsetHeight)

2. Сохранение изменяемых значений между рендерами

• Таймеры и интервалы (для последующей очистки)
• Значения, которые не должны запускать повторный рендер
• Счётчики для внутренней логики

3. Реализация необходимых действий

• Вызов методов на компонентах (imperative API)
• Интеграция с третьесторонними библиотеками

Примеры кода

Пример 1: Фокусировка на input

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

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Фокус на input</button>
    </>
  );
}

Пример 2: Сохранение ID таймера

function StopWatch() {
  const intervalRef = useRef(null);
  const [seconds, setSeconds] = useState(0);

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <>
      <p>Время: {seconds}s</p>
      <button onClick={startTimer}>Старт</button>
      <button onClick={stopTimer}>Стоп</button>
    </>
  );
}

Важные отличия от State

• useRef не вызывает рендер, useState вызывает
• useRef мутируемая (.current), useState неизменяемая
• useRef обновляется синхронно, useState асинхронно

Частые ошибки

• ❌ Использовать useRef для данных, влияющих на отображение
• ❌ Обращаться к .current на этапе рендера
• ❌ Менять .current внутри useCallback или useMemo

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