Introduction

This one is similar to the previous one but there is a little bit of difference which I will explain to you in the next blog. So today we will learn the Throttling concept it will help to prevent unnecessary requests if user clicks more than one time and it's not required it may break your app so to prevent that we will learn throttling.

Prerequisite

1. Understanding react, Javascript, and API's.

let's start

So for example, if you created an app where you have a product list and each product has its own add-to-cart button if you click this button, a server request will be made and a product will be added to the cart list suppose if a user presses the button again before the request is completed, the same product may re-added to the cart or the server request may be repeated in both cases our app may break. We have to prevent this to increase the performance of our app. So we use throttling in these types of cases or in those cases where we don't want the server request to happen again in a certain time period.

We will do a simple thing we will check if the API call is made once then it can be called after a certain time limit.

I have a small eCommerce app where I want to add a product to the cart list. I haven't applied Throtling here so let's see what happens if I click again and again before the request is completed.

//addToCart is a function that will call sent the request

<button 
   onClick={() =>addToCart() }
  >

I have pressed the add-to-cart button 3 times in a row,

The app is sending 3 requests and 1 product will be added 3 times or 3 requests will be made unnecessary.

let's create Debounce function

So instead of calling addToCart function directly, we will call **throttleFunction**.

const throttle = (fn, limit) => {
  let flag = true;                   //a
  return function () {                                    //3
    let context = this;
    let args = arguments;
    if (flag) {                       //b
      flag = false;                   //c
      fn.apply(context, args);
      setTimeout(() => {              //d
        flag = true;
      }, limit);
    }
  };
};
const addToCart = () => {
  //add to cart API here
};

export const throttleFunction = throttle(addToCart , 1000);   //2

<button 
   onClick={() =>throttleFunction() }                         //1
  >

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

1. call throttleFunction for every click.

2. throttleFunction will call throttle function with an addToCart function as an argument.

   1. Now throttle function returns a function where all magic happens.

      a. Now we will call this addToCart function in the throttle function but before that, we will create a variable (flag) whose initial value will be true

      b. the addToCart function **will be called only if the value of this variable is true.

      c. If the function is called then we set the variable (flag) to the false (so if the user fires throttleFunction again it will not fire this addToCart again).

      d. Now we will do one more thing here, we will set setTimeout it will set the flag variable true after a certain time period (I took 1000 milliseconds here for better understanding). So that the user can fire the addToCart function after 1000 milliseconds.

Now if the user clicks the add-to-cart button repeatedly, The addToCart function will be called within an interval of 1000 milliseconds.

Result

Now if I click the add-to-cart button repeatedly, the Next API call won't be fired before 1 second..

I clicked add-to-cart button 3 times in a row, but only the first call happened

Tip

• Time should take time limit according to your API response time, I took 1000 milliseconds for understanding purposes.