> Можно ли хранить данные в refs, которые не вызывают повторный рендер (React)

Короткий ответ

Да, refs в React можно использовать для хранения данных, которые не вызывают повторный рендер. useRef создаёт мутабельный объект с свойством .current, который сохраняется между рендерами, но его изменение не триггерит обновление компонента. Это ключевое отличие от state - refs предназначены именно для хранения значений, не влияющих на UI.

Подробное объяснение

В React есть два основных механизма хранения данных между рендерами: state и refs. State при изменении вызывает повторный рендер компонента, что необходимо для обновления UI. Refs же созданы для хранения значений, которые должны сохраняться между рендерами, но не требуют перерисовки компонента при изменении.

useRef возвращает объект { current: initialValue }, который остаётся стабильным на протяжении всего жизненного цикла компонента. Изменение ref.current не вызывает повторный рендер, потому что React не отслеживает изменения refs как часть своего реактивного механизма.

Типичные случаи использования refs для хранения данных:

• Хранение предыдущих значений props или state для сравнения
• Сохранение идентификаторов таймеров, интервалов, requestAnimationFrame
• Хранение callback-функций без необходимости их включения в зависимости эффектов
• Кэширование результатов вычислений, которые не влияют на UI
• Хранение флагов состояния (например, isMounted)

Важно понимать, что изменение ref не вызывает рендер, но сам ref доступен внутри любого рендера - его значение можно прочитать в любой момент. Это делает refs удобными для хранения данных, которые нужны в эффектах или обработчиках событий, но не должны влиять на то, что отображается.

На практике

На собеседовании важно показать понимание границ применения refs. Стоит упомянуть, что злоупотребление refs для хранения данных, которые всё-таки влияют на UI, - это антипаттерн. Если значение ref используется в JSX, его изменение не приведёт к обновлению интерфейса, что может создать баги.

Хороший пример - хранение предыдущего значения пропа для анимации или сравнения. Плохой пример - попытка хранить в ref данные, которые должны отображаться на экране, вместо state.

Также стоит отметить, что refs не участвуют в механизме реактивности React, поэтому их нельзя использовать в качестве зависимостей в useEffect - изменение ref не вызовет повторный запуск эффекта.

Пример кода

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

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

  // Сохраняем предыдущее значение count
  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const startTimer = () => {
    if (intervalRef.current !== null) return;
    intervalRef.current = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);
  };

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

  return (
    <div>
      <p>Текущее: {count}</p>
      <p>Предыдущее: {prevCountRef.current}</p>
      <button onClick={startTimer}>Старт</button>
      <button onClick={stopTimer}>Стоп</button>
    </div>
  );
}

Здесь intervalRef хранит ID таймера без лишних рендеров, а prevCountRef хранит предыдущее значение count для сравнения.

Как отвечать на собеседовании

Начни с прямого ответа - да, можно. Затем объясни разницу между state и refs: state вызывает рендер, ref - нет. Приведи 2-3 практических примера использования. Подчеркни, что refs не должны использоваться для данных, влияющих на отображение. Если спросят про useRef vs useState - объясни, что выбор зависит от того, нужно ли обновлять UI при изменении значения.

Что проверяет интервьюер

• Понимание разницы между state и refs
• Знание механизма рендеринга в React
• Умение выбирать правильный инструмент для задачи
• Понимание, что refs не участвуют в реактивности
• Способность объяснить практические сценарии использования

Типичные ошибки

• Утверждение, что refs вообще нельзя использовать для хранения данных (неверно - можно, но для специфических целей)
• Попытка использовать ref для данных, которые должны отображаться в JSX (изменение ref не вызовет обновление UI)
• Использование ref как замены state везде, где не хочется рендера (это приводит к трудноотлаживаемым багам)
• Забывание, что ref.current мутабелен, и изменение его напрямую - нормальная практика (в отличие от state)
• Утверждение, что refs не сохраняются между рендерами (сохраняются, это их ключевая особенность)