</>
typescriptbeginner

useDebounce — Debounced Value Hook

Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.

typescript
import { useState, useEffect } from 'react';

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

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

  return debouncedValue;
}

// Usage:
// const [query, setQuery] = useState('');
// const debouncedQuery = useDebounce(query, 300);
//
// useEffect(() => {
//   if (debouncedQuery) fetchResults(debouncedQuery);
// }, [debouncedQuery]);

Use Cases

  • Search-as-you-type
  • Window resize handlers
  • Form auto-save

Tags

#hooks#debounce#performance#search

Related Snippets

Similar patterns you can reuse in the same workflow.

typescriptintermediate

Infinite Scroll with Intersection Observer

Load more items as the user scrolls using IntersectionObserver. No external libraries required.

#infinite-scroll#intersection-observer
typescriptintermediate

useFetch — Generic Data Fetching Hook

Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.

#hooks#fetch
typescriptintermediate

useLocalStorage — Persistent State Hook

Sync React state with localStorage including SSR safety, JSON serialization, and cross-tab updates.

#hooks#localstorage
typescriptbeginner

useClickOutside — Outside Click Detection

Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.

#hooks#click-outside