useDebouncedCallback()

useDebouncedCallback<TArguments>(callback, delay?): (...arguments_) => void

Defined in: hooks/state/useDebouncedCallback.ts:41

A React hook that returns a debounced version of a callback. The debounced function will postpone its execution until after the specified delay has elapsed since the last time it was invoked.

The debounced function identity is stable across re-renders (unless the delay changes), and always calls the latest callback.

Type Parameters

TArguments

TArguments extends unknown[]

The argument types for the callback function.

Parameters

callback

(...arguments_) => void

The original callback function to debounce.

delay?

number = 200

Default 200ms. The debounce delay in milliseconds.

Returns

A debounced version of the callback function.

(...arguments_): void

Parameters

arguments_

...TArguments

Returns

void

Example

import { useState } from 'react';
import { useDebouncedCallback } from '@zl-asica/react/hooks';

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..."
    />
  );
};