How to implement rate limiting and debounce in React?

Question

Accepted Answer

**Debounce** — delaying function execution until the user stops calling it. **Rate Limiting** — limiting the number of function calls per period. **Why it matters:** Without debounce, a search input fires an API request on every keystroke — potentially hundreds of requests per minute. Without throttle, scroll handlers execute 60+ times per second. These patterns prevent server overload, reduce bandwidth usage, and keep the UI responsive. **Debounce — for search:** ```jsx function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debouncedValue; } function Search() { const [query, setQuery] = useState(""); const debouncedQuery = useDebounce(query, 300); useEffect(() => { if (debouncedQuery) { fetch(`/api/search?q=${debouncedQuery}`).then(/* ... */); } }, [debouncedQuery]); return setQuery(e.target.value)} />; } ``` **Throttle — for scroll/resize:** ```jsx function useThrottle(callback, delay) { const lastCall = useRef(0); return useCallback((...args) => { const now = Date.now(); if (now - lastCall.current >= delay) { lastCall.current = now; callback(...args); } }, [callback, delay]); } // Usage const handleScroll = useThrottle(() => { console.log("scroll!"); }, 200);

...

``` **Rate Limiting (on client):** ```tsx function useRateLimit(fn, limit, period) { const calls = useRef([]); return useCallback((...args) => { const now = Date.now(); calls.current = calls.current.filter(t => now - t < period); if (calls.current.length < limit) { calls.current.push(now); fn(...args); } }, [fn, limit, period]); } ``` **How debounce vs throttle differ:** - **Debounce** waits until the user *stops* doing something (e.g., typing), then fires once. - **Throttle** fires at most once every N milliseconds, regardless of how often the event fires. - Use debounce for search, form validation, and resize handling. - Use throttle for scroll tracking, mouse move, and analytics events. **Common pitfalls:** - Forgetting to clean up timers in useEffect (memory leaks). - Using debounce for scroll events where you need regular updates (use throttle instead). - Not using `useCallback` for the throttle wrapper (causes unnecessary re-renders).

React: How to implement rate limiting and debounce in React?