useDebounce

The useDebounce hook creates a debounced version of a callback function. This is useful for limiting how often expensive operations run, such as API calls triggered by user input.

Usage

import { useDebounce } from '@/hooks';

function SearchComponent() {
  const [query, setQuery] = useState('');
  
  const debouncedSearch = useDebounce((value: string) => {
    // This only runs 500ms after the user stops typing
    fetchSearchResults(value);
  }, 500);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value);
    debouncedSearch(value);
  };

  return (
    <input 
      value={query}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

API

function useDebounce<T extends (...args: Parameters<T>) => void>(
  callback: T,
  delay: number
): (...args: Parameters<T>) => void

Parameters

Parameter	Type	Description
callback	function	The function to debounce
delay	number	Delay in milliseconds

Returns

A debounced version of the callback that delays execution.

Use Cases

• Search inputs - Delay API calls while user types
• Form validation - Validate after user stops typing
• Resize handlers - Limit expensive recalculations
• Scroll handlers - Throttle scroll event processing