Debounce vs Throttle: Common Mistakes
Common mistakes when using debounce and throttle.
Debounce vs Throttle: Common Mistakes
Mistake 1: Using Debounce for Scroll
Debounce delays until scrolling stops. The user sees no feedback during scrolling.
Fix: use throttle for scroll (continuous feedback).
Mistake 2: Using Throttle for Search
Throttle runs during typing, causing multiple API calls.
Fix: use debounce for search (one call after typing stops).
Mistake 3: Not Preserving this and Arguments
Forgetting fn.apply(this, args) loses the context and arguments.
Fix: always use apply and rest/spread.
Mistake 4: Not Cleaning Up Timers
Not clearing timers on component unmount causes memory leaks.
Fix: add a cancel method and call it on unmount.
Mistake 5: Using Too Short a Delay
50ms debounce is too short (barely any optimization). 50ms throttle for scroll is too aggressive.
Fix: use 300ms for debounce, 100ms for throttle.
The Takeaway
Mistakes: debounce for scroll (use throttle), throttle for search (use debounce), not preserving this/args (use apply), not cleaning up timers (cancel on unmount), and too short delays (300ms debounce, 100ms throttle).
Because debounce delays execution until scrolling stops. The user sees no feedback during scrolling, which feels laggy. Use throttle instead for continuous feedback at a controlled rate.
Because throttle runs during typing, causing multiple API calls (e.g., 2-3 calls for typing 'hello'). Debounce waits for typing to stop, making only 1 call. Use debounce for search.
Because the returned function may be called in a different context (e.g., as an event listener). Without fn.apply(this, args), the original function loses its this binding and arguments. Always use apply and rest/spread.
Add a cancel method: debounced.cancel = () => clearTimeout(timer). In useEffect: return () => debounced.cancel(). This clears the timer when the component unmounts.
Debounce: 50ms is too short (barely any optimization, API still called on almost every keystroke). Use 300ms. Throttle: 10ms is too aggressive (barely any rate limiting). Use 100ms for scroll, 50ms for mousemove.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.