useThrottledState

函数：useThrottledState()

function useThrottledState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, Throttler<Dispatch<SetStateAction<TValue>>>]

function useThrottledState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, Throttler<Dispatch<SetStateAction<TValue>>>]

定义于：react-pacer/src/throttler/useThrottledState.ts:40

一个 React 钩子，用于创建一个节流状态值，该值在指定的时间窗口内最多更新一次。此钩子将 React 的 useState 与节流功能相结合，以提供受控的状态更新。

节流确保状态更新以受控的速率发生，无论设置器被调用的频率如何。这对于限制昂贵的重新渲染或依赖于快速变化状态的操作的速率非常有用。

该钩子返回一个包含以下内容的元组：

节流状态值
一个遵守配置的等待时间的节流设置器函数
用于附加控制的节流器实例

要更直接地控制节流而不进行状态管理，请考虑改用较低级别的 useThrottler 钩子。

类型参数

• TValue

参数

value

TValue

options

ThrottlerOptions<Dispatch<SetStateAction<TValue>>>

[TValue, Dispatch<SetStateAction<TValue>>, Throttler<Dispatch<SetStateAction<TValue>>>]

示例

tsx

// 基本节流 - 每秒最多更新一次状态
const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });

// 具有自定义前导/后导行为
const [value, setValue] = useThrottledState(0, {
  wait: 1000,
  leading: true,   // 首次更改时立即更新
  trailing: false  // 跳过尾随边缘更新
});

// 如果需要，访问节流器方法
const handleReset = () => {
  setValue(0);
  throttler.cancel(); // 取消任何挂起的更新
};

// 基本节流 - 每秒最多更新一次状态
const [value, setValue, throttler] = useThrottledState(0, { wait: 1000 });

// 具有自定义前导/后导行为
const [value, setValue] = useThrottledState(0, {
  wait: 1000,
  leading: true,   // 首次更改时立即更新
  trailing: false  // 跳过尾随边缘更新
});

// 如果需要，访问节流器方法
const handleReset = () => {
  setValue(0);
  throttler.cancel(); // 取消任何挂起的更新
};