---
title: "useThrottle 用法与示例"
description: "对值进行节流的React hook。"
canonical: https://reactuse.com/zh-Hans/state/usethrottle/
---

# useThrottle

对值进行节流的React hook

`useThrottle` 接受一个值和以毫秒为单位的等待时间，返回该值的节流版本。与防抖（等待空闲）不同，节流确保值在每个间隔内最多更新一次，提供稳定的更新流。底层使用 `lodash.throttle`，因此你可以传入相同的选项（`leading`、`trailing`）进行精细控制。

### 使用场景

- 限制由高频事件（例如滚动位置、调整大小尺寸）驱动的 UI 更新频率
- 确保值以固定间隔发出，而非等待变化暂停
- 从快速变化的源值提供稳定的视觉反馈（例如进度指示器）

### 注意事项

- **值级别节流**：此 hook 节流的是*值*本身，而不是回调。如果你需要节流函数调用，请使用带有 `maxWait` 选项的 `useDebounceFn` 或专用的节流工具。
- **选项透传**：第三个参数直接传递给 `lodash.throttle`，支持 `leading` 和 `trailing` 边缘配置。
- 参见 `useDebounce` 了解延迟更新直到值停止变化，更适合搜索输入和验证。

## Usage

```tsx live

function Demo() {
  const [value, setValue] = useState<string>();
  const throttledValue = useThrottle(value, 500);

  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="输入的值"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>节流值: {throttledValue}</p>
    </div>
  );
};

```

%%API%%