To optimise browser performance as well as keep up with user experience deliverables, there are few techniques, one of which isdebouncing.

A very fine example for this would be any search bar. When you type a word in search bar with every letter it shows new recommendations.

From the surface the trick here must be making anAPI call every time somebody enters a letter to fetch desirable options according to latest input.

A better way to do this is through debouncing,

• We set athreshold for a time period, can be 5s or .05 sec.

• Every time this threshold timer expires, we make an API call to get data best matching the input.

• Clear the timer and reset

Code:

<inputclassName="search-bar"onChange={hecticSearchHandler}/>

functionhecticSearchHandler(...args){/* capture the search query entered by customer */const{value}=args[0].target;/* Make an API call with search query */getSearchResults(value);}

Reusable function code:

constoptiSearchHandler=debounceFunc(searchHandler,500)constdebounceFunc=(func,delay)=>{lettimer;returnfunction(...args){constcontext=this;clearTimeOut(timer);timer=setTimeOut(()=>{func.apply(context,args);},delay)}}

Watch this video for clarity:Debounce interview ques