usePrevious

跟踪更新前的值

usePrevious 接受一个值，返回上一次渲染的值。在初始渲染时返回 undefined，因为没有先前的值。hook 在 ref 中存储先前的值，并在每次渲染后更新它，给你一个值在最近一次更改之前的快照。

使用场景

• 比较当前和先前的值以触发动画、过渡或条件逻辑
• 检测变化的方向（例如计数器是增加还是减少）
• 实现撤销功能或显示”从 X 变为 Y”的指示器

注意事项

• 初始值：首次渲染时返回 undefined。相应地将结果类型化为 T | undefined。
• SSR 安全：内部仅使用 React ref，无浏览器依赖。
• 参见 useLatest 了解在回调中访问当前（最新）值而不产生过时闭包。

Usage

function Demo() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>
        现在: {count}, 之前: {prevCount}
      </p>
    </div>
  );
};

API

usePrevious

Returns

T | undefined: 更新前的值

Arguments