useDebouncedValue
函数：useDebouncedValue()
ts
function useDebouncedValue<TValue>(value, options): [TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
function useDebouncedValue<TValue>(value, options): [TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
定义于：react-pacer/src/debouncer/useDebouncedValue.ts:41
一个 React 钩子，用于创建一个仅在指定延迟后更新的防抖值。 与 useDebouncedState 不同，此钩子自动跟踪输入值的更改并相应地更新防抖值。
防抖值仅在自输入值上次更改以来经过指定的等待时间后才会更新。 如果输入值在等待时间到期之前再次更改，计时器将重置并重新开始等待。
这对于从频繁更改的 props 或 state（例如搜索查询或表单输入）派生防抖值非常有用， 在这些情况下，您希望限制下游效应或计算的发生频率。
该钩子返回当前的防抖值和底层的防抖器实例。 防抖器实例可用于访问其他功能，例如取消和执行计数。
类型参数
• TValue
参数
value
TValue
options
DebouncerOptions<Dispatch<SetStateAction<TValue>>>
返回
[TValue, Debouncer<Dispatch<SetStateAction<TValue>>>]
示例
tsx
// 防抖搜索查询
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // 最后一次更改后等待 500 毫秒
});
// debouncedQuery 将在 searchQuery 停止更改 500 毫秒后更新
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// 处理输入更改
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
// 防抖搜索查询
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // 最后一次更改后等待 500 毫秒
});
// debouncedQuery 将在 searchQuery 停止更改 500 毫秒后更新
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// 处理输入更改
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
