📄 tanstack/pacer/latest/docs/framework/react/reference/functions/useDebouncedCallback
File: useDebouncedCallback.md | Updated: 11/15/2025
Source: https://tanstack.com/pacer/latest/docs/framework/react/reference/functions/useDebouncedCallback
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Guides
API Reference
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference
Debouncer Examples
Throttler Examples
Rate Limiter Examples
Queue Examples
Batcher Examples
TanStack Query Examples
Framework
React
Version
Latest
Menu
Getting Started
Guides
API Reference
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference
Debouncer Examples
Throttler Examples
Rate Limiter Examples
Queue Examples
Batcher Examples
TanStack Query Examples
On this page
useDebouncedCallback
Copy Markdown
Function: useDebouncedCallback()
================================
ts
function useDebouncedCallback<TFn>(fn, options): (...args) => void;
function useDebouncedCallback<TFn>(fn, options): (...args) => void;
Defined in: react-pacer/src/debouncer/useDebouncedCallback.ts:42
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
TFn extends AnyFunction
TFn
DebouncerOptions<TFn>
ts
(...args): void;
(...args): void;
...Parameters<TFn>
void
tsx
// Debounce a search handler
const handleSearch = useDebouncedCallback((query: string) => {
fetchSearchResults(query);
}, {
wait: 500 // Wait 500ms between executions
});
// Use in an input
<input
type="search"
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="search"
onChange={(e) => handleSearch(e.target.value)}
/>
