Debouncing events in React
This excerpt from John Dugan's blog provides a succinct reason:
Usage in real world examples can prevent code from executing straight away after typing into a text field or preventing multiple attempts at a form submission.
This example uses the debounce npm package. The first argument is the function we wish to debounce, the second is the debounce time and the third is a boolean on whether we wish to fire the "leading" event (first event fired) or "trailing" event (last event fired after delay time).
In this example, we are debouncing the submission of the form but from the leading event (fire straight away but ignore the following events until delay time has passed without event) and the text input that updates the local state with the trailining event (only fire the last event fired after the delay time).
Note: text input may not always need to be debounced depending on the weight of the operation performed. We are going to assume in this example that there is some intense computation going on.
Hello is a series that is about short, sharp examples. Read more on this series to find small gems to add your toolset.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.