---
title: "usePrevious 用法與示例"
description: "跟蹤更新前的值。"
canonical: https://reactuse.com/zh-Hant/state/useprevious/
---

# usePrevious

跟蹤更新前的值

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

### 使用場景

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

### 注意事項

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

## Usage

```tsx live

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%%