---
title: "useCounter 用法與示例"
description: "跟蹤數值的 React hook。"
canonical: https://reactuse.com/zh-Hant/state/usecounter/
---

# useCounter

跟蹤數值的 React hook。

`useCounter` 管理一個數值計數器狀態，提供 `increment`、`decrement`、`set` 和 `reset` 操作。支援可選的最小值和最大值約束以限制計數範圍。

### 使用場景

- 建構數量選擇器或購物車中的數量控制
- 實作分頁控制或步驟指示器
- 管理任何需要遞增/遞減操作的數值狀態

### 注意事項

- **範圍約束**：設定 `min` 和 `max` 選項可防止計數器超出指定範圍。
- **重置**：`reset` 函式將計數器恢復到初始值。
- **相關 hooks**：另請參閱 `useBoolean` 用於布林切換，以及 `useCycleList` 用於在值清單中循環。

## Usage

```tsx live

function Demo() {
  const [current, set, inc, dec, reset] = useCounter(10, 100, 1);

  return (
    <div>
      <p>{current} 最大值：100；最小值：1；</p>
      <div>
        <button
          type="button"
          onClick={() => {
            inc();
          }}
          style={{ marginRight: 8 }}
        >
          inc()
        </button>
        <button
          type="button"
          onClick={() => {
            dec();
          }}
          style={{ marginRight: 8 }}
        >
          dec()
        </button>
        <button
          type="button"
          onClick={() => {
            set(3);
          }}
          style={{ marginRight: 8 }}
        >
          set(3)
        </button>
        <button type="button" onClick={reset} style={{ marginRight: 8 }}>
          reset()
        </button>
      </div>
    </div>
  );
};

```

%%API%%