> Какой React хук используется для хранения предыдущего значения (React)

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

В React нет встроенного хука для хранения предыдущего значения. Разработчики обычно создают кастомный хук usePrevious, используя useRef и useEffect. useRef хранит значение между рендерами, а useEffect обновляет его после каждого рендера. Альтернативно можно использовать useRef напрямую с ручным обновлением в useEffect.

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

useRef - это ключевой механизм для хранения предыдущего значения, так как он не вызывает ререндер при изменении своего .current свойства. Типичная реализация usePrevious выглядит так: внутри хука создаётся ref, который инициализируется переданным значением. В useEffect (без зависимостей, выполняется после каждого рендера) ref обновляется текущим значением. Возвращается же старое значение ref, сохранённое до вызова useEffect. Это работает благодаря порядку выполнения: сначала рендер (где возвращается предыдущее значение), затем эффект (где ref обновляется для следующего рендера).

Важно понимать, что это не "магическое" отслеживание изменений, а просто сохранение значения между рендерами. Если нужно отслеживать изменения конкретного пропса или состояния, можно использовать useRef в паре с useEffect с зависимостью от этого значения.

На практике

Этот паттерн полезен для сравнения текущего и предыдущего значения в эффектах, анимациях, логировании изменений или реализации undo/redo. Например, при работе с формами можно отслеживать, изменилось ли поле с предыдущего рендера. В компонентах с анимациями предыдущее значение используется для вычисления направления или типа перехода.

Пример кода

TYPESCRIPT
import { useRef, useEffect } from 'react';

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();
  
  useEffect(() => {
    ref.current = value;
  });
  
  return ref.current;
}

// Использование
function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  
  return (
    <div>
      <p>Сейчас: {count}, было: {prevCount}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

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

Начни с того, что встроенного хука нет, но есть устоявшийся паттерн. Объясни механизм работы: useRef для хранения, useEffect для обновления после рендера. Упомяни, что хук возвращает undefined при первом рендере - это важно для обработки начального состояния. Если спросят про альтернативы, скажи, что можно использовать useRef напрямую с ручным присваиванием в useEffect, но кастомный хук чище и переиспользуемее.

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

Интервьюер проверяет понимание жизненного цикла React-компонента, разницу между useRef и useState, порядок выполнения рендера и эффектов. Также оценивается способность создавать абстракции (кастомные хуки) и знание типовых паттернов. Это базовый, но важный вопрос для senior - он показывает, насколько глубоко кандидат понимает механику React.

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

• Использование useState вместо useRef - это вызовет бесконечный ререндер.
• Обновление ref до рендера - тогда предыдущее значение будет равно текущему.
• Забывание обработать случай первого рендера (возврат undefined).
• Попытка использовать usePrevious внутри эффекта с зависимостью от того же значения - это нарушает порядок обновления.