Popular Interview Question that Reduced me to SDE-1 from SDE-2 Role

"Imagine this scenario" the interviewer started after failing to completely corner me with his repository of questions he came prepared with.

This man here held in his hand one of my career milestones……The mind-numbing, mountain shaking, sea splitting Software Development Engineer-2 Role.

It had taken me many battles to get here from the "Hydra HR", all the way to the final round "Evil Demon King Senior Developer".

BUT!!

Fate was not so generous and my interviewer toyed with me like a cat playing catch with a mouse. But God Forbid, I was not easy prey. I took his questions like a champ and traded blows like no one he has ever seen until he took out his trump card to which many valiant SDE-1 engineers fell.

It was a weapon I had never encountered before……until now.

The Scenario that requires the "Debounce Function"

"Imagine this scenario" the interviewer started.

"You have a search box where you show auto-completion once the user has stopped typing, keep in mind that to show these suggestions you need to send an API request to the backend. How would you handle it?"

When I first heard the question, in my mind…

Hmmm….If CTC is over 20L, Party budget should be 20,000Rs, no maybe I should increase it more…..

But I soon snapped back to reality when the interviewer nudged me to think out loud, which I of course dare not say that I was planning the budget for my victory party over him.

But I also got wondering, why would he choose such a simple question as a finisher?

Those thoughts soon ended once I dived deeper into the details…let me explain

Say the user typed "s", "se", "ser", "sert", "serty".

If you are not careful, you would be sending 5 API requests just for a single user. Even ignoring the rampant implications it would have in the backend, to service so many requests, you would have issues handling it in the frontend as well.

I started out slow and in the end, came up with a solution that uses setTimeout to send requests, but as it turns out due to something interfering with it in React, this solution won’t work if you use it in a react project(Turns out I just implemented it wrong in the interview that too a stupid mistake).

After the interview, the interviewer explained that the term I am looking for is called "Debounce Function".

So, I looked it up and this is what I found

What is Debounce?

The term debounce comes from electronics. When you’re pressing a button, let’s say the power button on your TV remote, the microchip in the remote receives the signal so quickly that even the few milliseconds you hold it, it registers the "press" multiple times.

To avoid this behavior, once the microchip registers a signal, it stops processing signals from that button for a small set interval which can vary.

Debounce in JavaScript

The question we were asked is similar to the above example.

Only when you are sure the user has stopped typing, do you want to send the API request to the backend.

In react, this can be easily implemented with the following library and code.

The library that has this function pre-written is lodash.debounce, so let’s import it

import debounce from "lodash.debounce";

Now we are gonna write a function to use the above for react

const timer = 1000

const debouncedSave = useRef(

debounce((nextValue) => YourFunction(nextValue), timer)

).current;

timer → You can edit the time you want to wait by editing "1000" which means 1 second in this case.

YourFunction → The function you want to delay until the user finishes. It would look like

const YourFunction = (value)=> {

sendAPIRequest(value)

}

If you would like the exact implementation of the debounce function, you can check out its Codepen here

But here’s a simple implementation I got from the internet

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('I have been called');
}
const processChange = debounce(() => saveInput());

Want more from me?

1. Subscribe to get notified when I publish articles.
2. Support my writing with no extra cost to you by becoming a referred Medium member.
3. Connect and reach me on Linkedin and Twitter

References:

Throttling and Debouncing in JavaScript

Can someone explain the "debounce" function in Javascript

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)