Debouncingand throttlingare two very common terms that we come across when trying to optimize function calls. They can be very useful for improving the performance of user interactions.

Before jumping into the main implementation, let’s understand the basic concepts of debounce and throttle and their real-life use cases (skip ahead if you are already familiar with these concepts).

What Is debounce?

Debouncing enforces that there is a minimum time gap between two consecutive invocations of a function call.

For example, a debounce interval of 500ms means that if 500ms hasn’t passed from the previous invocation attempt, we cancel the previous invocation and schedule the next invocation of the function after 500ms.

A common application of debounce is a Typeahead.

#javascript

How To Use Debounce and Throttle the Right Way With React Hooks
1.60 GEEK