Framework
Version
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference

useDebouncedCallback

Function: useDebouncedCallback()

ts
function useDebouncedCallback<TFn, TArgs>(fn, options): (...args) => void
function useDebouncedCallback<TFn, TArgs>(fn, options): (...args) => void

Defined in: react-pacer/src/debouncer/useDebouncedCallback.ts:41

A React hook that creates a debounced version of a callback function. This hook is essentially a wrapper around the basic debounce function that is exported from @tanstack/pacer, but optimized for React with reactive options and a stable function reference.

The debounced function will only execute after the specified wait time has elapsed since its last invocation. If called again before the wait time expires, the timer resets and starts waiting again.

This hook provides a simpler API compared to useDebouncer, making it ideal for basic debouncing needs. However, it does not expose the underlying Debouncer instance.

For advanced usage requiring features like:

  • Manual cancellation
  • Access to execution counts
  • Custom useCallback dependencies

Consider using the useDebouncer hook instead.

Type Parameters

TFn extends (...args) => any

TArgs extends any[]

Parameters

fn

TFn

options

DebouncerOptions

Returns

Function

Parameters

args

...TArgs

Returns

void

Example

tsx
// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
  fetchSearchResults(query);
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="text"
  onChange={(e) => handleSearch(e.target.value)}
/>
// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
  fetchSearchResults(query);
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="text"
  onChange={(e) => handleSearch(e.target.value)}
/>
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.