usePrevious

24 May, 2023

usePrevious用来保存上一次更新时的值。

import { useRef, useEffect } from 'react';

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

  return ref.current;
}

使用方式：

import { useRef, useEffect } from 'react';
import { usePrevious } from './hooks/usePreviou.js';

const App = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  useEffect(() => {
    const isTriggered = prevCount !== count;
  }, [count, ...]);
};

第一次App执行： usePrevious返回的值为undefined.