函数: useDebouncer()

function useDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactDebouncer<TFn, TSelected>

function useDebouncer<TFn, TSelected>(
   fn, 
   options, 
selector): ReactDebouncer<TFn, TSelected>

定义于: react-pacer/src/debouncer/useDebouncer.ts:102

一个 React hook，用于创建和管理 Debouncer 实例。

这是一个更底层的 hook，它提供了对 Debouncer 功能的直接访问，没有任何内置状态管理。这允许您将其与您偏好的任何状态管理解决方案（useState、Redux、Zustand 等）集成。

此 hook 提供防抖动功能，以限制函数可以被调用的频率，在执行最新调用之前等待指定的时间延迟。这对于处理诸如窗口大小调整、滚动事件或实时搜索输入等频繁事件非常有用。

防抖器将在自上次调用指定的等待时间结束后才执行函数。如果在等待时间到期之前再次调用该函数，计时器将重置并重新开始等待。

状态管理和选择器

该 hook 使用 TanStack Store 进行响应式状态管理。selector 参数允许您指定哪些状态更改将触发重新渲染，通过防止不相关的状态更改导致不必要的重新渲染来优化性能。

默认情况下，不会有响应式状态订阅，您必须通过提供 selector 函数来选择加入状态跟踪。这可以防止不必要的重新渲染，并让您完全控制组件何时更新。只有当您提供 selector 时，组件才会随着选定状态值的变化而重新渲染。

可用的状态属性

canLeadingExecute: debouncer 是否可以在前沿执行
executionCount: 已完成的函数执行次数
isPending: 防抖器是否正在等待超时触发执行
lastArgs: Последний вызов maybeExecute 的参数
status: 当前执行状态（“disabled” | “idle” | “pending”）

类型参数

• TFn extends AnyFunction

• TSelected = {}

参数

fn

TFn

options

DebouncerOptions<TFn>

选择器

(state) => TSelected

Returns (返回)

ReactDebouncer<TFn, TSelected>

示例

tsx

// Default behavior - no reactive state subscriptions
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  searchDebouncer.maybeExecute(e.target.value);
};

// Access the selected state (will be empty object {} unless selector provided)
const { isPending } = searchDebouncer.state;

// Default behavior - no reactive state subscriptions
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 }
);

// Opt-in to re-render when isPending changes (optimized for loading states)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ isPending: state.isPending })
);

// Opt-in to re-render when executionCount changes (optimized for tracking execution)
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({ executionCount: state.executionCount })
);

// Multiple state properties - re-render when any of these change
const searchDebouncer = useDebouncer(
  (query: string) => fetchSearchResults(query),
  { wait: 500 },
  (state) => ({
    isPending: state.isPending,
    executionCount: state.executionCount,
    status: state.status
  })
);

// In an event handler
const handleChange = (e) => {
  searchDebouncer.maybeExecute(e.target.value);
};

// Access the selected state (will be empty object {} unless selector provided)
const { isPending } = searchDebouncer.state;

使用防抖器