Use Debounced or Throttle to Reduce the Frequency of Calls in React

Introduction

There are several concerns for a search system to fetch the related results with the inputted text changed. We can understand clearly from the following screen-shot.

1. The system searches each character even we only want to search “react”
2. It will cause errors if the API has rate limitations

It matters the performance and the user experience. After surveying, I think we have two kinds of solutions to reduce the frequency of function calls. Both two methods use a timer to solve the problem here.

1. Throttle
2. Debounced

That’s doing experiments to check which one is suitable for our system.

Solution 1. Create the throttle to avoid high-frequency

The idea of the throttle function is to delay calling the function during a period of time. The drawback is that it will ignore the text changed until the function calls were completed.

Create a throttle function