useDebouncedState

函数：useDebouncedState()

function useDebouncedState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, Debouncer<Dispatch<SetStateAction<TValue>>>]

function useDebouncedState<TValue>(value, options): [TValue, Dispatch<SetStateAction<TValue>>, Debouncer<Dispatch<SetStateAction<TValue>>>]

定义于：react-pacer/src/debouncer/useDebouncedState.ts:38

一个 React 钩子，用于创建防抖状态值，将 React 的 useState 与防抖功能相结合。此钩子提供当前的防抖值以及更新它的方法。

状态值仅在自上次更新尝试以来经过指定的等待时间后才更新。如果在等待时间到期之前尝试另一次更新，计时器将重置并重新开始等待。这对于处理应进行节流的频繁状态更新非常有用，例如搜索输入值或窗口大小调整尺寸。

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

当前的防抖值
用于更新防抖值的函数
具有其他控制方法的防抖器实例

类型参数

• TValue

参数

value

TValue

options

DebouncerOptions<Dispatch<SetStateAction<TValue>>>

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

示例

tsx

// 防抖搜索输入
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
  wait: 500 // 最后一次按键后等待 500 毫秒
});

// 更新值 - 将进行防抖
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// 获取防抖函数已执行的次数
const executionCount = debouncer.getExecutionCount();

// 获取挂起状态
const isPending = debouncer.getIsPending();

// 防抖搜索输入
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
  wait: 500 // 最后一次按键后等待 500 毫秒
});

// 更新值 - 将进行防抖
const handleChange = (e) => {
  setSearchTerm(e.target.value);
};

// 获取防抖��数已执行的次数
const executionCount = debouncer.getExecutionCount();

// 获取挂起状态
const isPending = debouncer.getIsPending();