Как работает useRef

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

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

1. Доступ к DOM-элементам
2. Хранение мутируемых значений (таймеры, предыдущие значения)

import { useRef, useEffect } from 'react';

function Component() {
  const inputRef = useRef(null);
  const counterRef = useRef(0); // Значение сохраняется при ререндерах

  useEffect(() => {
    inputRef.current.focus(); // Доступ к DOM-элементу
    counterRef.current += 1; // Изменение без ререндера
  }, []);

  return <input ref={inputRef} />;
}

Важно: изменение ref.current не вызывает ререндер. Для синхронизации с UI используйте useState.