usePrevious

跟蹤更新前的值

usePrevious 回傳給定值在前一次渲染時的值。首次渲染時回傳 undefined。這對於比較前後值或實作基於值變更的邏輯很有用。

使用場景

• 比較 props 或 state 的前後值以偵測變更
• 實作動畫方向（例如數字增減時的上/下動畫）
• 記錄或除錯 state 變更歷程

注意事項

• 首次渲染：首次渲染時回傳 undefined，因為沒有前一個值。
• 參考相等性：儲存的是值的參考。對於物件，儲存的是前一次渲染的參考。
• 相關 hooks：另請參閱 useLatest 用於獲取最新值的 ref。

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