Introduction

So today we will learn Debouncing concept it will help to prevent unnecessary requests to the server.

Prerequisite

1. Understanding react, Javascript and API's.

let's start

So for example, if you created an app where you have a search bar where you want to search a list of items or users so generally, we make API calls for every keystroke which is not good because in this case, we are making API calls for each stroke while this is not necessary we should make a call for a word or after some letters so that we can prevent the unnecessary requests to the server.

I have a small app where I want to search user I haven't applied debouncing here so see how my network requests look like,

const searchHandle = async (value) => {
    await ApiService({ token, searchedUserName: value }));
  };

<input
onChange={(e) => searchHandle(e.target.value)}
/>

For searching user vineet app has to send a request for every letter.

###Let's understand what we will do

So what we will do we will check whether the user stops writing for a certain time period then we will make a call and fetch the data.

let's cteate Debounce function

So instead of calling searchHandle function directly , we will call debouncedFunction.

const debounce = (func) => {                       //3
  let timer;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);   //b
    timer = setTimeout(() => {           //a
      timer = null;
      func.apply(context, args);
    }, 1000);
  };
};

const searchHandle = async (value) => {
    await ApiService({ token, searchedUserName: value }));
  };

const debouncedFunction = debounce(searchHandle);      //2

<input
onChange={(e) => debouncedFunction(e.target.value)}      //1
/>

let's understand the flow of code and what it is doing,

1. call debouncedFunction for every keystroke.

2. debouncedFunction will call debounce function with a searchHandler function as an argument.

   💡In javascript, we can pass a function as an argument and we can return a function inside the function.

3. Now debounce function returns a function where all magic happens.

• a. Now we will call that serachHandler function in this returned function with some trick we call it in the setTimeout with some delay (like we fix timer with that and it will call this searchHandler function after some specific time). And stored this setTimeout function in the timer variable.

• b. If user again presses any key before the time period of that previous setTimeout then again this function will be called but we set one more condition before it, we will check that whether this timer variable is true or not (there is already setTimeout function along with serachHandler ) if its there then we clear that previous setTimeout and again set the new setTimeout along with that serachHandler function.

Result

Now request will happen only when the time between two keystrokes is more than 1 second if the user presses any key before the 1 second then a new timer will set ( that will fire the serachHandler function after 1 second ) and the previous setTimeout will be deleted. This cycle will be going on until the util time between two keystrokes is greater than 1 second. By doing this we prevent those unnecessary calls. Now if i search something

Tip

• Time should be less than 500 millisecond , I took 1000 millisecond for understanding purpose.