A React hook that throttles value updates to prevent excessive re-renders and API calls by limiting how frequently a value can change. ## Key Components - **`useThrottle`** - Main hook function that accepts a value and throttle limit - **Generic type support** - Works with any value type through TypeScript generics - **Configurable timing** - Default 200ms limit with customizable throttle duration ## Usage Example ```typescript import { useState } from "react" import { useThrottle } from "./use-throttle" function SearchComponent() { const [searchTerm, setSearchTerm] = useState("") // Throttle search input to reduce API calls const throttledSearch = useThrottle(searchTerm, 500) // This effect will only run when throttledSearch changes (max once per 500ms) useEffect(() => { if (throttledSearch) { searchAPI(throttledSearch) } }, [throttledSearch]) return ( setSearchTerm(e.target.value)} placeholder="Search..." /> ) } // Throttle scroll position updates function ScrollTracker() { const [scrollY, setScrollY] = useState(0) const throttledScrollY = useThrottle(scrollY, 100) useEffect(() => { const handleScroll = () => setScrollY(window.scrollY) window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return
Scroll position: {throttledScrollY}
} ``` Perfect for search inputs, scroll handlers, resize events, and any scenario where you need to limit the frequency of expensive operations while maintaining responsive UI updates.