Create Autocomplete Search Box with Debouncing

What is Debouncing?

Debouncing is a technique to improve browser performance specially used to limit the number of API calls. For Example, you want to make an Autosearch functionality on your website. Whenever users start typing you will have to make an API call and return the result in a list view.

Making API calls on each keystroke cost too much on performance. To fix this you can wait for the user to take a break while typing and then make an API call. This is one example to use Debounce, you can use this technique in many other places where you want to limit actions.

How can it be Achieved in JavaScript?

To Achieve debounce here is a small code (Credit https://davidwalsh.name/javascript-debounce-function)

  function debounce(func, wait) {
    let timeout;
    var debounced = function() {
      var context = this;
      var args = arguments;
      function later() {
        func.apply(context, args);
      }
      if (timeout) {
        clearInterval(timeout);
      }
      timeout = setTimeout(later, wait);
    };
    return debounced;
  }

Let’s see line by line what is happening in this code. So we have created debounce function which is expecting two params i.e. function and wait time. In the next line create a timeout variable in which we will define setTimeout instance later. Next, define a new function to form a closure.

 var debounced = function() { }

Next, define two variables context to store the context of this and args to store arguments passed to the function.

 function debounce(func, wait) {
  let timeout;
  var debounced = function() { 
      var context = this;
      var args = arguments;
  }
}

Next, create a later function which will be executed after debounce time has elapsed and pass context and arguments in that.

 function debounce(func, wait) {
  let timeout;
  var debounced = function() { 
      var context = this;
      var args = arguments;

      function later() {
        func.apply(context, args);
      }

  }
}

Next, check if the timeout is set previously then destroy the current setTimeout and after that set a new setTimeout.

 function debounce(func, wait) {
  let timeout;
  var debounced = function() { 
      var context = this;
      var args = arguments;

      function later() {
        func.apply(context, args);
      }
      if (timeout) {
        clearInterval(timeout);
      }
      timeout = setTimeout(later, wait);
  }
}

Lastly, just return the debounced function.

 function debounce(func, wait) {
  let timeout;
  var debounced = function() { 
      var context = this;
      var args = arguments;

      function later() {
        func.apply(context, args);
      }
      if (timeout) {
        clearInterval(timeout);
      }
      timeout = setTimeout(later, wait);
  }
   return debounced;
}

So basically what you will be doing is calling debounce function on each keystroke and debounce function is returning debounced function in return. Debounced function will kill the previously declared setTimeout and declare a new one until the function call is stopped and last declared setTimeout() completes. This is how you will declare a function call and attach an event to it.

 const debounceCall = debounce(fetchData, 500);

 const handleKeyPress = event => {
    var value = event.target.value;
    if (value !== "" && value.length >= 2) {
      debounceCall(value);
    } else {
      setCountries([]);
    }
  };

You can check the implementation in the demo sandbox, here is the URL:
https://codesandbox.io/s/github/rsahni/react-simple-autocomplete-debounce

GitHub URL is:
https://github.com/rsahni/react-simple-autocomplete-debounce