使用防抖值
函数: useDebouncedValue()
function useDebouncedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
function useDebouncedValue<TValue, TSelected>(
value,
options,
selector?): [TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
定义于: react-pacer/src/debouncer/useDebouncedValue.ts:90
一个 React hook，它创建一个延迟更新的防抖值。与 useDebouncedState 不同，此 hook 会自动跟踪输入值的变化并相应地更新防抖值。
防抖值仅在自输入值上次更改以来经过指定的等待时间后才会更新。如果在等待时间过期之前输入值再次更改，则计时器将重置并重新开始等待。
这对于从频繁变化的 props 或 state（如搜索查询或表单输入）派生防抖值非常有用，在这些情况下，您希望限制下游效果或计算发生的频率。
该 hook 返回当前的防抖值和底层的 debouncer 实例。debouncer 实例可用于访问取消和执行计数等其他功能。
状态管理和选择器
该 hook 使用 TanStack Store 通过底层的 debouncer 实例进行响应式状态管理。 selector 参数允许您指定哪些 debouncer 状态更改将触发重新渲染，通过防止不必要的重新渲染来优化性能，当不相关状态发生变化时。
默认情况下，不会有响应式状态订阅，您必须通过提供选择器函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供选择器时，组件才会根据所选状态值的变化而重新渲染。
可用的 debouncer 状态属性
- canLeadingExecute: debouncer 是否可以在前沿执行
- executionCount: 已完成的函数执行次数
- isPending: 防抖器是否正在等待超时触发执行
- lastArgs: Последний вызов maybeExecute 的参数
- status: 当前执行状态（“disabled” | “idle” | “pending”）
类型参数
• TValue
• TSelected = DebouncerState<Dispatch<SetStateAction<TValue>>>
参数
value
TValue
options
DebouncerOptions<Dispatch<SetStateAction<TValue>>>
选择器?
(state) => TSelected
Returns (返回)
[TValue, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.state;
// Default behavior - no reactive state subscriptions
const [searchQuery, setSearchQuery] = useState('');
const [debouncedQuery, debouncer] = useDebouncedValue(searchQuery, {
wait: 500 // Wait 500ms after last change
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [debouncedQuery, debouncer] = useDebouncedValue(
searchQuery,
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// debouncedQuery will update 500ms after searchQuery stops changing
useEffect(() => {
fetchSearchResults(debouncedQuery);
}, [debouncedQuery]);
// Handle input changes
const handleChange = (e) => {
setSearchQuery(e.target.value);
};
// Access the selected debouncer state (will be empty object {} unless selector provided)
const { isPending, executionCount } = debouncer.state;
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。