PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Приведи примеры использования useRef.

Хуки

useRef применяется в двух ролях: доступ к DOM и «память» компонента, не вызывающая перерендер. Вот типичные практические примеры.

Фокус и управление DOM-элементом

const LoginForm = () => {
  const emailRef = useRef(null);

  useEffect(() => {
    emailRef.current.focus(); // автофокус при открытии
  }, []);

  return <input ref={emailRef} type="email" />;
};

Сюда же: scrollIntoView(), выделение текста, воспроизведение видео (videoRef.current.play()), измерение размеров через getBoundingClientRect().

Хранение id таймера / интервала

const AutoSave = ({ draft }) => {
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setTimeout(() => save(draft), 2000);
    return () => clearTimeout(timerRef.current);
  }, [draft]);
};

Инстансы внешних объектов

WebSocket, карта, chart-инстанс — создаются один раз и живут вне рендера:

const chartRef = useRef(null);

useEffect(() => {
  chartRef.current = new Chart(canvasRef.current, config);
  return () => chartRef.current.destroy();
}, []);

Предыдущее значение props/state

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => { ref.current = value; });
  return ref.current;
};

Защита от гонок и устаревших колбэков

Флаг «актуален ли запрос», хранение последнего колбэка для стабильного обработчика, счётчик рендеров при отладке — всё это данные, которые нужно помнить, но которые не должны перерисовывать компонент.

Коротко для собеседования

Примеры: автофокус и императивная работа с DOM (скролл, измерения, видео), id таймеров с очисткой, инстансы внешних библиотек (WebSocket, Chart), хук usePrevious для прошлого значения, флаги для защиты от гонок. Общий принцип: изменяемые данные без перерендера.

Другие вопросы раздела