useAsyncDebouncedCallback

function useAsyncDebouncedCallback<TFn>(fn, options): (...args) => Promise<Awaited<ReturnType<TFn>> | undefined>;

Defined in: async-debouncer/useAsyncDebouncedCallback.ts:46

A Preact hook that creates a debounced version of an async callback function. This hook is a convenient wrapper around the useAsyncDebouncer hook, providing a stable, debounced async function reference for use in Preact components.

The debounced async 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. The returned function always returns a promise. The call that triggers an execution resolves or rejects with that execution's result; superseded calls resolve with the most recent result (which may be undefined if nothing has executed yet), and calls made while the debouncer is disabled resolve with undefined.

This hook provides a simpler API compared to useAsyncDebouncer, making it ideal for basic async debouncing needs. However, it does not expose the underlying AsyncDebouncer instance.

For advanced usage requiring features like:

• Manual cancellation
• Access to execution/error state
• Custom useCallback dependencies

Consider using the useAsyncDebouncer hook instead.

Type Parameters

TFn

TFn extends AnyAsyncFunction

Parameters

fn

TFn

options

PreactAsyncDebouncerOptions<TFn, { }>

Returns

(...args) => Promise<Awaited<ReturnType<TFn>> | undefined>

Example

// Debounce an async search handler
const handleSearch = useAsyncDebouncedCallback(async (query: string) => {
  const results = await fetchSearchResults(query);
  return results;
}, {
  wait: 500 // Wait 500ms between executions
});

// Use in an input
<input
  type="search"
  onChange={e => handleSearch(e.target.value)}
/>