hook debounce

⏳ useDebounce Hook

Overview

useDebounce is a custom React hook that delays updating a value until a specified period of inactivity has passed. It is useful for optimizing performance in scenarios such as search inputs, API calls, or any situation where you want to limit how often a value changes in response to rapid user input.

The hook returns the debounced value, which only updates after the user has stopped changing the input for the given delay.

🧪 Usage Example

import useDebounce from '@/hooks/useDebounce';

const SearchComponent = () => {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500); // 500ms delay

  useEffect(() => {
    if (debouncedSearch) {
      // Trigger API call or filter logic here
    }
  }, [debouncedSearch]);

  return (
    <input
      value={search}
      onChange={e => setSearch(e.target.value)}
      placeholder="Type to search..."
    />
  );
};

🔍 Implementation Details

• Delay: The hook accepts a value and a delay (in milliseconds). It updates the returned value only after the delay has passed without further changes.
• Cleanup: Any pending timeout is cleared if the value or delay changes, or when the component unmounts, preventing memory leaks.

📦 Return Type

function useDebounce<T>(value: T, delay: number): T;

• value: The latest value to debounce.
• delay: The debounce delay in milliseconds.
• Returns: The debounced value, updated only after the specified delay.

---

For more hooks and context utilities, see the contexts-and-hooks documentation.