useDebouncedCallback()
useDebouncedCallback<
TArguments
>(callback
,delay
?): (...arguments_
) =>void
Defined in: src/hooks/state/useDebouncedCallback.ts:39
A custom React hook to debounce a callback function. The debounced function will only be executed after a specified period of inactivity.
Type Parameters
• TArguments extends unknown
[]
The argument types for the callback function.
Parameters
callback
(...arguments_
) => void
The original callback function to debounce.
delay?
number
= 200
The debounce delay in milliseconds. Defaults to 200ms.
Returns
Function
A debounced version of the callback function.
Parameters
arguments_
...TArguments
Returns
void
Example
tsx
import { useState } from 'react';
import { useDebouncedCallback } from '@zl-asica/react';
const MyComponent = () => {
const [query, setQuery] = useState('');
const debouncedSearch = useDebouncedCallback((searchQuery: string) => {
console.log('Searching for:', searchQuery);
}, 300);
return (
<input
type="text"
value={query}
onChange={(e) => {
setQuery(e.target.value);
debouncedSearch(e.target.value);
}}
placeholder="Search..."
/>
);
};