使用防抖状态
函数: useDebouncedState()
function useDebouncedState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
function useDebouncedState<TValue, TSelected>(
value,
options,
selector?): [TValue, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
定义于: react-pacer/src/debouncer/useDebouncedState.ts:81
一个 React hook，用于创建防抖状态值，结合了 React 的 useState 和防抖功能。此 hook 同时提供当前防抖值和更新它的方法。
状态值仅在自上次更新尝试以来经过指定的等待时间后才会更新。如果在等待时间过期前进行了另一次更新，计时器将重置并重新开始等待。这对于处理需要节流的频繁状态更新非常有用，例如搜索输入值或窗口调整大小的尺寸。
该 hook 返回一个元组，包含：
- 当前的防抖值
- 用于更新防抖值的方法
- 包含附加控制方法的防抖器实例
状态管理和选择器
该 hook 使用 TanStack Store 通过底层的防抖器实例进行响应式状态管理。 selector 参数允许您指定哪些防抖器状态更改将触发重新渲染，通过防止不相关的状态更改发生不必要的重新渲染来优化性能。
默认情况下，将不会有响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 selector 时，组件才会在选定的状态值更改时重新渲染。
可用的 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, Dispatch<SetStateAction<TValue>>, ReactDebouncer<Dispatch<SetStateAction<TValue>>, TSelected>]
示例
// Default behavior - no reactive state subscriptions
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(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 [searchTerm, setSearchTerm, debouncer] = useDebouncedState('', {
wait: 500 // Wait 500ms after last keystroke
});
// Opt-in to re-render when pending state changes (optimized for loading indicators)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ isPending: state.isPending })
);
// Opt-in to re-render when execution count changes (optimized for tracking executions)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({ executionCount: state.executionCount })
);
// Opt-in to re-render when debouncing status changes (optimized for status display)
const [searchTerm, setSearchTerm, debouncer] = useDebouncedState(
'',
{ wait: 500 },
(state) => ({
status: state.status,
canLeadingExecute: state.canLeadingExecute
})
);
// Update value - will be debounced
const handleChange = (e) => {
setSearchTerm(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 万开发者。