Debouncing and throttling in LWC and JavaScript

Debouncing and its significance

In this article, we’ll learn about debouncing and how it becomes very useful in our LWC implementation.

Debouncing enhances the performance of components developed in LWC or using any JavaScript tool. Scenarios include writing complex functions or Apex integration/method calls where multiple function calls might affect the efficiency and performance of component rendering, thereby reducing overall performance and the user integration experience.

Real-world scenario in LWC

Consider a scenario where you have a search bar element that invokes an Apex class on each onchange event. So, whenever the user enters any key, it will call the function that many times. For instance, if the user types (T,A,I,L,O,R) the function gets invoked six times, which reduces performance.

If you use debouncing, the function would be invoked only once, after the user finishes typing. You achieve this by adding a delay using setTimeout before calling the function.

timer;
contacts;
error;
key;

onchangehandle(event)
{

    winndow.clearTimeout(this.timer); //clear all previous debounce timeout
    this.key=event.target.value;
    this.timer=setTimeout(()=>{
        this.getAllcontacts();
    },1000)
}

getAllcontacts()
{
    getcontactsdata({key:this.key}).then(res=>{
        this.contacts=res;
    }).catch(err=>{
        this.error=err;
        console.log(this.error)
    })
}

Adding a timer for 1 second means that once the user finishes typing, the function call getAllContacts() will occur.

Throttling and its significance

Throttling is another mechanism that enhances website performance. It ensures that certain functions are called within a specified time, regardless of how many times the user clicks the button. Throttling helps prevent unnecessary method calls and executions. It also ensures that the function runs consistently and efficiently.

For example, if you visit an ecommerce site during a sale where users can buy a mobile phone only once per hour, that means you can only purchase one phone in an hour. If you want to buy another phone, you’ll have to wait an hour. You can’t buy multiple phones within the same hour, no matter how many times you click the button to add the item to your cart. This is an example of throttling.

<button onclick=throttle()>Click </button>

 //time=1000 (delay which we want to specify in ms) 
 function throttle(func1, time) {
  let wait = false;

  return (...args) => {
    if (wait) {
        return;
    }

    func1(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, time);
  }
}

As you can see in the above example, initially, the wait variable is set as false, indicating no click has occurred. Once a user clicks, the throttle() function is called, which sets a timer for the specified time — such as 1,000 ms. During this time, the wait variable is set as true, and the browser doesn’t respond to any clicks. This helps limit unnecessary button clicks by the user.

Note: Always try to implement debouncing and throttling in complex LWC functionalities for better performance of the website and an enhanced UI experience.

— By Ravi Rai and Ritika Rajput