How to use debounce with React

Have you ever faced a problem where you are doing an expensive task or api call on onChange of an input. If yes then you also know about the performance will be not that good in that case. In this article we will gonna learn how to use debounce with React.

What is debounce ?

Debounce is a technique where we put a limitation on running an expensive logic/function. In other words instead of calling a function on every key press we can put a limit so that the function will be called after n ms.

To achieve debounce there is a lot of npm packages available but most simplest is the debounce from the lodash.

Usage

Let’s assume we have a normal input and we are doing an api call on onChange event. That api is taking 2 seconds to give the response back. In this case the performance of the app will not be that good because we are calling the apis a lot of time because of onChange event.

<input
onChange={apiCall}
/>

The solution of above problem is to call the api after few ms. So, that there will be no chance of low performance.

We will gonna use the debounce from loadsh.

import { debounce } from 'lodash';

<input
onChange={()=>{debounce(apiCall,500)}}
/>

Now apiCall will be gonna call after 500 ms. This allows us to only call api function once user has stopped typing for 500ms or more.

I hope you have learned how to use debounce with React.


4 Comments

vvscode · July 14, 2020 at 2:45 pm

Have you run your code?
1) it doesn’t work at all
2) it doesn’t work as you desribe

    Narender Saini · July 15, 2020 at 3:22 am

    It’s working perfectly. Maybe you are missing something.

How to use font awesome icons in React - Blog React · July 6, 2020 at 3:32 am

[…] How to use debounce with React […]

How to do authentication using JWT - Blog React · July 8, 2020 at 3:47 am

[…] How to use debounce with React […]

Comments are closed.