What is debounce?

Debounce is a technique that delays executing a function until after a user has stopped triggering it for a set amount of time.

The classic example is a search box. If you want to fetch results as a user types, you don’t want to fire an API request on every single keystroke. That would hammer your server and feel janky. With debounce, you wait until the user has paused typing for, say, 300 milliseconds, and then fire the request. If they keep typing, the timer resets.

The name comes from electronics, where “bouncing” refers to a button that briefly makes and breaks contact multiple times in quick succession when pressed. Debouncing in hardware filters out those extra signals so only one clean signal gets through. The software concept is the same idea.

Debounce is often confused with throttle, which is a related but different technique. Throttle limits how often a function can fire regardless of how many times it’s triggered. Debounce delays the function until the triggering stops. A search box is a good use case for debounce. A scroll handler that fires at most once every 100ms is a good use case for throttle.

I’ve used debounce and its cousin throttle hundreds of times in front-end development. They’re necessary tools for preventing janky UX and protecting your servers from excessive, unnecessary load. Once you understand both, you’ll find yourself reaching for them constantly.