function useAsyncDebouncer<TFn, TArgs>(fn, options): AsyncDebouncer<TFn, TArgs>
function useAsyncDebouncer<TFn, TArgs>(fn, options): AsyncDebouncer<TFn, TArgs>
Defined in: async-debouncer/useAsyncDebouncer.ts:42
A low-level React hook that creates an AsyncDebouncer instance to delay execution of an async function.
This hook is designed to be flexible and state-management agnostic - it simply returns a debouncer instance that you can integrate with any state management solution (useState, Redux, Zustand, Jotai, etc).
Async debouncing ensures that an async function only executes after a specified delay has passed since its last invocation. This is useful for handling fast-changing inputs like search fields, form validation, or any scenario where you want to wait for user input to settle before making expensive async calls.
• TFn extends AnyAsyncFunction
• TArgs extends any[]
TFn
AsyncDebouncerOptions<TFn, TArgs>
AsyncDebouncer<TFn, TArgs>
// Basic API call debouncing
const { maybeExecute } = useAsyncDebouncer(
async (query: string) => {
const results = await api.search(query);
return results;
},
{ wait: 500 }
);
// With state management
const [results, setResults] = useState([]);
const { maybeExecute } = useAsyncDebouncer(
async (searchTerm) => {
const data = await searchAPI(searchTerm);
setResults(data);
},
{
wait: 300,
}
);
// Basic API call debouncing
const { maybeExecute } = useAsyncDebouncer(
async (query: string) => {
const results = await api.search(query);
return results;
},
{ wait: 500 }
);
// With state management
const [results, setResults] = useState([]);
const { maybeExecute } = useAsyncDebouncer(
async (searchTerm) => {
const data = await searchAPI(searchTerm);
setResults(data);
},
{
wait: 300,
}
);
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.