React DebounceCallback Hook
React useDebounceCallback hook for debouncing function calls. Control API requests and expensive operations with TypeScript support for Next.js apps.
API Getting Hammered?
Join our Discord community for help from other developers.
Ever watched your search API get absolutely hammered because users type fast and you're firing a request on every keystroke? You know the drill—implement setTimeout, clear it on every change, handle cleanup, deal with stale closures. This free open source React useDebounceCallback custom hook handles all that debouncing complexity so you can focus on your app logic instead of wrestling with timing and cleanup code in your React applications.
useDebounceCallback showcase
Smart debouncing with full control:
This free open source React hook simplifies function debouncing with TypeScript support for modern JavaScript applications. Whether you're building search interfaces, auto-save features, or form validation in your Next.js projects, this React hook keeps your performance optimized.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-debounce-callback.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-debounce-callback.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-debounce-callback.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-debounce-callback.jsonWhy most debouncing implementations suck
Look, you could manually manage setTimeout, clearTimeout, track IDs, handle component unmounts, and deal with React's closure issues. But after debugging the third "why is my API still getting hit" bug, you'll appreciate having this handled properly.
Most developers forget to clear timeouts when components unmount, causing memory leaks and phantom API calls in React applications. Or they use inline setTimeout calls that don't handle rapid re-mounting properly in Next.js projects. Some skip proper closure handling and wonder why their debounced functions have stale values in TypeScript components.
The React hook gives you proper cleanup on unmount, cancel/flush controls, and preserves your function's type signature. Plus it uses lodash.debounce under the hood—battle-tested code that handles edge cases you haven't thought of in JavaScript applications.
Real talk—debouncing seems simple until you need leading edge execution, max wait times, and proper cancellation in React development. This custom hook gives you all the advanced controls without the headaches.
This free open source React hook handles the debounce boilerplate while you focus on building features. Whether you're creating React applications, Next.js projects, or TypeScript codebases, this custom hook keeps your function calls optimized.
Features
- Lodash.debounce integration with full-featured debouncing using industry-standard library in React applications
- Control functions including cancel, flush, and isPending methods for advanced control in TypeScript components
- Configurable options with leading, trailing, and maxWait parameters for fine-tuning in Next.js projects
- Automatic cleanup with useUnmount hook preventing memory leaks on component unmount in JavaScript applications
- TypeScript support with complete type definitions and generic function preservation
- Performance optimized using useMemo and useEffect for efficient re-renders in React development
- Free open source designed for modern React development workflows
When you'll actually use this
Real talk—this isn't for every function call in React applications. For simple onClick handlers or one-time operations, regular functions are fine. But when you need to control the frequency of expensive operations, this React hook shines in Next.js projects.
Perfect for:
- Search inputs - Delay API calls until user stops typing built with TypeScript
- Form validation - Debounce expensive validation checks using React patterns
- Auto-save features - Delay save operations until user pauses editing in JavaScript applications
- API throttling - Control request frequency to prevent rate limiting in React components
- Resize handlers - Debounce expensive calculations during window resize in Next.js applications
- Button click protection - Prevent rapid successive clicks on action buttons using TypeScript validation
- Filter controls - Debounce complex filtering operations on large datasets in React development
- Input formatting - Delay expensive text processing until user stops typing in JavaScript frameworks
API Reference
useDebounceCallback
| Parameter | Type | Default | Description |
|---|---|---|---|
func | T extends (...args: any) => ReturnType<T> | required | Function to debounce |
delay | number | 500 | Delay in milliseconds |
options | DebounceOptions | undefined | Additional lodash.debounce options |
DebounceOptions
| Property | Type | Default | Description |
|---|---|---|---|
leading | boolean | false | Execute on the leading edge of the timeout |
trailing | boolean | true | Execute on the trailing edge of the timeout |
maxWait | number | undefined | Maximum time func is allowed to be delayed |
Control Functions
| Function | Type | Description |
|---|---|---|
cancel | () => void | Cancel any pending function invocations |
flush | () => void | Immediately invoke any pending function invocations |
isPending | () => boolean | Check if there are any pending function invocations |
Common gotchas
Debounced functions aren't the original: You get a wrapped version with extra methods (cancel, flush, isPending) in React applications. Your original function's return value is preserved, but the timing changes completely.
Leading/trailing execution timing confusion: Default is trailing-only (fires after delay) in TypeScript components. Leading=true fires immediately then debounces. Understand the difference or you'll get confusing behavior in Next.js projects.
Async function cleanup issues: If your callback is async and the component unmounts in JavaScript applications, the promise might still resolve. Handle this in your async function if needed for React development.
Timer precision limitations: JavaScript timers can drift, especially in background tabs in Next.js applications. For mission-critical timing, consider other approaches in TypeScript implementations.
Stale closure captures: The debounced function captures variables from when it was created in React components. If you're passing changing dependencies, make sure the hook recreates when needed.
Memory leaks from improper cleanup: Forgetting to cancel pending debounced calls on unmount causes memory leaks in JavaScript applications. This React hook handles cleanup automatically.
Related hooks you will also like
useDebounceValue
Debounce state values with automatic delay and cleanup
useTimeout
Timeout management with automatic cleanup and cancellation
useInterval
Interval management with automatic cleanup and pause functionality
useEventCallback
Stable callback references with latest closure values
useEventListener
Custom event listener management with automatic cleanup
useUnmount
Execute cleanup functions when component unmounts
Questions you might have
React useDarkMode Hook
React useDarkMode hook with OS preference sync and localStorage persistence. Dark mode management with TypeScript support for Next.js applications.
React useDebounceValue Hook
React useDebounceValue hook for debounced state management. Optimize search inputs and form values with TypeScript support for Next.js apps.