useDebounceCallback
React hook for debouncing callback functions with advanced control options. Perfect for React applications requiring performance optimization with Next.js integration and TypeScript support.
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.jsonFeatures
- Lodash.debounce integration with full-featured debouncing using industry-standard library
- Control functions including cancel, flush, and isPending methods for advanced control
- Configurable options with leading, trailing, and maxWait parameters for fine-tuning
- Automatic cleanup with useUnmount hook preventing memory leaks on component unmount
- TypeScript support with complete type definitions and generic function preservation
- Performance optimized using useMemo and useEffect for efficient re-renders
Examples
Advanced Search with Controls
Demonstrates debounced search with cancel, flush controls, and loading states.
Use Cases
This free open source React hook works well for:
- Search inputs - Delay API calls until user stops typing built with Next.js
- Form validation - Debounce validation checks using TypeScript patterns
- Auto-save features - Delay save operations until user pauses editing
- API throttling - Control request frequency to prevent rate limiting
- Resize handlers - Debounce expensive calculations during window resize events
- Button click protection - Prevent rapid successive clicks on action buttons
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 |
Usage Pattern
const debouncedCallback = useDebounceCallback(
(value: string) => console.log(value),
300,
{ leading: true, trailing: false }
);
// Call the debounced function
debouncedCallback("search term");
// Control methods
debouncedCallback.cancel(); // Cancel pending calls
debouncedCallback.flush(); // Execute immediately
debouncedCallback.isPending(); // Check if pendingImplementation Notes
- Hook uses lodash.debounce internally for robust, battle-tested debouncing behavior
- Automatically cancels pending debounced functions when component unmounts
- Preserves original function signature and return type through TypeScript generics
- Uses useMemo to prevent unnecessary recreation of debounced function instances
- Compatible with both synchronous and asynchronous callback functions
- Requires lodash.debounce dependency for full functionality and control options
useDarkMode
Manage dark mode state with OS preference detection and localStorage persistence. Perfect for React applications with Next.js integration and TypeScript support.
useDebounceValue
Debounced value state with update functionality for React applications. Perfect for Next.js projects requiring optimized input handling with TypeScript support and seamless integration.