-
Book Overview & Buying
-
Table Of Contents
React Application Architecture for Production - Second Edition
By :
When users type in a search input, each keystroke can trigger a new API request. If someone searches for education-related ideas and types "Education" quickly, that's nine characters and most likely nine separate network requests. Most of these requests are wasted because the user hasn't finished typing yet.
We can see this problem in action from the network tab in the browser.

Figure 8.3 – Network requests while typing without debouncing
As we can see, there are 9 network requests being made while the user is typing. This wastes bandwidth, puts unnecessary load on the server, and can cause race conditions where responses arrive out of order. Imagine if the response for "Edu" arrives after the response for "Education"; the UI would show the wrong results, which is a bad user experience.
Debouncing solves this by waiting for a pause in user input before making the request. Instead of firing on every keystroke, we wait...