useDebounce Hook

Debounce values to reduce unnecessary renders and API calls.

useDebounce (Value)

Debounces any value:

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Usage - Search Input

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      // Only fires 300ms after user stops typing
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);

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

useDebouncedCallback (Function)

For debouncing callbacks:

import { useCallback, useRef } from 'react';

function useDebouncedCallback<T extends (...args: any[]) => void>(
  callback: T,
  delay: number
): T {
  const timeoutRef = useRef<NodeJS.Timeout>();

  return useCallback(
    ((...args) => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      timeoutRef.current = setTimeout(() => callback(...args), delay);
    }) as T,
    [callback, delay]
  );
}

Usage - Debounced Callback

function AutoSave() {
  const [content, setContent] = useState('');
  
  const debouncedSave = useDebouncedCallback((text: string) => {
    saveToServer(text);
  }, 1000);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newContent = e.target.value;
    setContent(newContent);
    debouncedSave(newContent); // Auto-saves 1s after last keystroke
  };

  return <textarea value={content} onChange={handleChange} />;
}

When to use:

• Search inputs
• Window resize handlers
• Auto-save functionality
• Form validation