Как сравнить старые значения и новые значения в React useEffect Hook?

Иногда мы хотим сравнить старое и новое значение изменения состояния.

В этой статье мы рассмотрим, как преобразовать предыдущее значение состояния в новое.

Создайте свой собственный крючок

Мы можем получить старое значение состояния с помощью нашего собственного крючка.

Например, мы можем написать:

import { useEffect, useRef, useState } from "react";
const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};
export default function App() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  useEffect(() => {
    console.log(prevCount, count);
  }, [prevCount, count]);
  return (
    <div className="App">
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <p>{count}</p>
    </div>
  );
}

Мы создаем ловушку usePrevious с параметром value, который является состоянием, из которого мы хотим получить предыдущее значение,

В ловушке мы создаем ссылку с ловушкой useRef для создания нереактивного свойства.

Затем мы добавляем хук useEffect с обратным вызовом, который устанавливает ref.current в value, чтобы установить предыдущее значение.

И мы возвращаем ref.current, который имеет предыдущее значение.

Теперь в App мы создаем состояние count, для которого хотим получить предыдущее значение.

Затем мы вызываем наш хук usePrevious с count, чтобы получить предыдущее значение count.

И мы наблюдаем за значением с помощью хука useEffect, чтобы зарегистрировать prevCount и count.

И мы смотрим значения, передавая prevCount и count во втором аргументе.

Ниже мы добавляем кнопку с параметром onClick, установленным для функции, которая вызывает setCount для увеличения счетчика.

И ниже мы показываем count.

Обратный вызов useEffect должен регистрировать значения prevCount и count, где prevCount должно быть предыдущим значением count.

Заключение

Мы можем наблюдать за предыдущим значением состояния, создавая собственный хук.