Как с помощью useRef получить предыдущее значение пропса?

Как получить предыдущее значение пропса с помощью useRef

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

Реализация

Создайте ref, который будет хранить предыдущее значение. Внутри useEffect обновите ref.current после того, как вы его использовали. Таким образом, при следующем рендере ref.current будет содержать предыдущее значение.

import { useRef, useEffect } from 'react';

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

function MyComponent({ count }) {
  const prevCount = usePrevious(count);
  return (
    <div>
      <p>Текущее: {count}</p>
      <p>Предыдущее: {prevCount}</p>
    </div>
  );
}

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

• useRef создает ref с начальным значением undefined.
• useEffect запускается после каждого рендера, когда value изменяется.
• Внутри useEffect мы обновляем ref.current, но это не вызывает повторный рендер.
• При следующем рендере usePrevious возвращает предыдущее значение, так как ref.current еще не обновлен.

Вывод

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