Использование useRef для DOM-элементов

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

Привязка ref к элементу

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

const inputRef = useRef(null);

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

После монтирования компонента inputRef.current будет содержать настоящий HTML-элемент <input>.

Типичные сценарии

Фокусировка при монтировании

Автоматически установить фокус на поле ввода при открытии формы:

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

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

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

Получение значения без состояния

Иногда удобно прочитать значение поля напрямую, особенно в неконтролируемых компонентах:

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

  function handleSubmit() {
    console.log('Значение:', inputRef.current.value);
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      <input ref={inputRef} defaultValue="" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Управление медиа или анимациями

Пример с видео:

function VideoPlayer() {
  const videoRef = useRef(null);

  function play() {
    videoRef.current.play();
  }

  function pause() {
    videoRef.current.pause();
  }

  return (
    <>
      <video ref={videoRef} src="movie.mp4" />
      <button onClick={play}>▶️</button>
      <button onClick={pause}>⏸️</button>
    </>
  );
}

Важные особенности

ref.current становится доступен только после того, как React создаст соответствующий DOM-узел (обычно внутри useEffect).
Не пытайтесь читать или изменять ref.current во время рендера — это может привести к ошибкам.
Ref работает только с DOM-элементами и классовыми компонентами. Для функциональных компонентов требуется forwardRef.

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