Reusable code patterns

Copy-paste ready hooks and utilities to accelerate your development workflow.

TSuseDebounce.ts
1import { useEffect, useState } from 'react';2 3export function useDebounce<T>(value: T, delay: number = 500): T {4  const [debouncedValue, setDebouncedValue] = useState<T>(value);5 6  useEffect(() => {7    const handler = setTimeout(() => {8      setDebouncedValue(value);9    }, delay);10 11    return () => {12      clearTimeout(handler);13    };14  }, [value, delay]);15 16  return debouncedValue;17}18 19// Usage20const [searchTerm, setSearchTerm] = useState('');21const debouncedSearch = useDebounce(searchTerm, 300);