</>
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.

typescriptbeginner

useDebouncedCallback Hook

Returns a debounced version of a callback that delays execution until the pause in calls.

Best for: Search input debouncing

#hooks#debounce
typescriptintermediate

Infinite Scroll with Intersection Observer

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

Best for: Feed pagination

#infinite-scroll#intersection-observer
typescriptintermediate

React Intersection Observer Hook

Custom useIntersectionObserver hook for lazy loading, infinite scroll, and scroll animations.

Best for: Lazy loading components when they enter viewport

#react#hooks
typescriptintermediate

useThrottle Hook for Rate Limiting

Throttle rapidly-firing values like scroll or resize events with a configurable delay hook.

Best for: Scroll position tracking

#react#hooks