Original subtitles

Now, let's tackle the problem, kind of a problem, I guess, Dad, we're sending a request for every

keystroke, we might not want to do that because we're spamming our server with requests.

If we do that, so would probably be better if we set some timer and if the timer expired, we check

if the current input in this will input here is the same as at the beginning of the timer and only if

it's the same.

We know that there has been a pause and the user passed typing and therefore we probably want to send

the request.

Not clear what I mean.

Well, let me show you.

Here is our effect.

And in the end here, we're fetching data now at the beginning of the fact will now actually use set

time out, which is a normal JavaScript function, has nothing to do with Hoke's, of course, to set

a timer and let's say the timer is 500 milliseconds and you can use any value you want.

Now, want to wait for the user to pause typing for 500 milliseconds.

And only if that happened, I want to send the request.

So in this anonymous function passing here as a first argument to set time out, which is the function

it executes after five hundred milliseconds there, I want to send that request.

So I'll move all that logic for constructing the query and sending that request into that set timeout

function.

So that will happen after 500 milliseconds.

Right now, of course, we're only deferring this where we're not really doing anything else.

Instead, we'll have to make sure that that we also check after these five hundred milliseconds.

So instead of the function, we passed a set timeout.

If entered value entered filter is the same as the entered value five hundred milliseconds ago.

And how can we do that for that?

It's important to understand how closures work in JavaScript entered filters here will actually be locked

in when we set the timer.

So it will not be the value the user has entered after this timer expired.

It will be the value the user entered when we set this timer.

That's important.

That's how JavaScript works.

So entered filter here will not be the current value to user entered.

It will be the old value 500 milliseconds ago, basically when you effect executed and when we then

set the timer four.

So that's what entered filter will be will not be the current input of the old one, so to say.

Now, I also need to turn to one to compare what's currently Indian put with what the user entered 500

milliseconds ago and only if it's the same I know, OK, seems to be the value the user wants to go

with.

At least the user paused, typing.

So now is the time to send the HDP request, so we need to compare it.

But how do we get to current value?

Will we get that current value with something you also learned about in this course with a ref?

A reference?

For that react also has a hook use ref, this allows us to create a reference simply by calling use

ref and you can store it isn't a concern, let's say the input ref just like that.

You can assign this to a DOM element by simply going to the element and our and put here and there at

the ref property, the ref Propp, a special prop supported by react and pointed input ref.

Now we established a connection between this input here, the input element and the input ref variable

or constant up here.

We can now use this year and compare it.

Input Reath current, Mr. Element current is a property the ref simply has this ref object simply has

this will be an input element.

Therefore here we can check the value.

If that value and that will be the current value because input ref is defined outside of the closure,

so that's not locked in or anything like that.

So that's the current value currently entered into input.

If death's the same as the entered value when we set the timer, then we know the value hasn't changed

in between.

Or at least it's now the same as it was at the beginning of the timer.

So it's actually there.

And hence I'll cut this one more time.

It's actually there instead of this if statement where we want to construct that Koreans sent the request.

Now, one important note here.

Input reath there for now, of course, awls is a dependency of our effect here because I'm using input