Debouncing vs. Throttling in React
Debouncing waits for a pause in events before acting; throttling fires at a steady rate. Use debounce for search bars to avoid API calls on every keystroke, and throttle for scroll handlers to prevent lag.
Why it exists
User interactions like typing, scrolling, or resizing can fire dozens of events per second. Attaching expensive operations, like API calls or DOM recalculations, directly to these events can freeze the UI and create a poor user experience. Debouncing and throttling were invented to regain control over the execution frequency of event handlers.
The mental model
Think of a chatty friend. Debouncing is waiting for them to completely stop talking before you respond; if they keep interrupting themselves to add more, your 'wait' timer resets. Throttling is deciding you'll only listen and respond once every minute, ignoring anything they say in between your listening windows.
How it works
In React, both are typically implemented with custom hooks that manage timers. A debounce hook uses setTimeout on each event, but clears the previous timer. The wrapped function only runs if the timer completes without being cleared. A throttle hook uses a timestamp or a boolean flag to check if enough time has passed since the last execution. If not, it ignores the current event, preventing the function from running too frequently.
When to use it
Use DEBOUNCING when you only care about the final state after a flurry of events. This is perfect for search input fields (wait for the user to stop typing), form validation, and autosaving. Use THROTTLING for continuous events where you need intermediate updates but not every single one. This is ideal for scroll position tracking, window resizing, or preventing button spam.
When not to use it
Don't debounce events where you need feedback during the action, like a scroll handler; the event would only fire after the user stops scrolling. Don't throttle events where only the very last action matters, like a search query; you might send several incomplete queries instead of just the final, intended one.
One canonical example
A search component fetches suggestions from an API. Without debouncing, every keystroke ('r', 're', 'rea', 'reac', 'react') triggers a separate API call. By wrapping the fetch logic in a custom useDebounce hook with a 300ms delay, the component waits until the user pauses typing for 300ms before sending a single, consolidated API request for 'react'. This drastically reduces server load and network chatter.
Interview question
For an autosave feature that should trigger only after a user stops typing for a short period, which technique is most appropriate?
- a.A direct event listener, as it provides immediate feedback.
- b.Debouncing, to execute the save function only after a pause in user input.Correct
- c.A combination of both, to handle both frequent and infrequent typing.
- d.Throttling, to ensure the save function runs at a consistent interval.
Why? this is the answer
Debouncing is ideal for scenarios like autosave because it waits for a period of user inactivity before executing the function, ensuring the save occurs only after the user has finished typing. Throttling, conversely, would execute the save function at a maximum frequency during typing, which is not the desired behavior for an 'after pause' autosave.
Just read this? Test yourself on what you have been reading.
Read the original → geeksforgeeks.org
- #react
- #performance
- #hooks
- #debounce
- #throttle
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles