useDebouncedCallback()

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

Defined in: src/hooks/state/useDebouncedCallback.ts:37

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

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

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';

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