When to Use Debounce vs Throttle
Practical guide to choosing between debounce and throttle.
When to Use Debounce vs Throttle
Use Debounce When:
You want the action to happen after the user stops:
- Search input: wait for the user to stop typing, then search.
- Auto-save: wait for the user to stop editing, then save.
- Window resize: wait for the user to finish resizing, then recalculate.
- Form validation: wait for the user to finish typing, then validate.
Use Throttle When:
You want the action to happen at a controlled rate during continuous activity:
- Scroll: update UI at most once every 100ms while scrolling.
- Mousemove: track position at most once every 50ms.
- Button click (rapid): prevent more than one click per 500ms.
- Window resize: update layout at most once every 200ms while resizing.
Decision Guide
- Does the user need feedback during the activity? -> Throttle.
- Should the action happen only after the activity stops? -> Debounce.
- Is the event continuous (scroll, mousemove)? -> Throttle.
- Is the event bursty (typing, editing)? -> Debounce.
The Takeaway
Debounce: after activity stops (search, auto-save, validation). Throttle: during activity at a controlled rate (scroll, mousemove, rapid clicks). If the user needs feedback during the activity, use throttle. If the action should happen after, use debounce.
Debounce. Wait for the user to stop typing, then make the API call. This avoids calling the API on every keystroke. 300ms is a good delay.
Throttle. The user needs continuous feedback while scrolling. Debounce would delay the update until scrolling stops, which feels laggy. Throttle limits to once every 100ms.
Either. Debounce if you want to recalculate after resizing stops (simpler, one calculation). Throttle if you want to update during resizing (smoother feedback, but more calculations). Debounce is more common.
Debounce. Wait for the user to stop editing, then save. This avoids saving on every keystroke. 1000ms is a good delay (save 1 second after editing stops).
Throttle (or debounce with immediate=true). Throttle with 500ms ensures the action runs at most once per 500ms. Debounce with immediate=true runs on the first click and ignores subsequent clicks for 500ms.
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.