To set up this cascading timer of sorts.
We're going to first write in some code that is going to just set up a timer to do the search in five
hundred milliseconds.
Right now, we're not going to worry about the cancelling action.
So we're still going on the same behavior as before where every single key press results in a search.
They will just all be lagged by five hundred milliseconds.
Once we get this code together, we'll then start to discuss how to add in that cancel step.
All right, so back inside my code editor.
Fortunately, this can be really easy.
All we have to do is find a if term right here where we do our search and we can either wrap just the
search statement or we can wrap the entire thing right here.
The entire statement inside of a set time out right now.
We will wrap the entire thing.
I'm going to put in a set time out.
I'm going to move the if statement inside their.
And then after it all, put in a five hundred millisecond timer.
So we can now save this to flip back over and do a quick test.
If I now delete programming, I then put in programming, everything is lagged by five or milliseconds.
That really is step one.
As simple as it sounds now, all we have to do is make sure that any time there is an additional input
change, we cancel the previous timer.
Now, as a quick aside, how do we cancel a set time out in general?
Let's just discuss that separately very quickly inside my council.
I'm going to write out a quick set Time-Out statement.
Inside, if you're all do a console log of hi there and I'm going to try to delay it by how about 10
seconds, so I'll put in ten thousand milliseconds.
And whenever you create a time out using set time out, you get back a number or an integer like 116.
This is an identifier that identifies the timer.
That was just created before that timer times out or completes.
So there did right there.
We have the opportunity to cancel this timer by making use of another built in function or a function
that is built into JavaScript.
It's going to create another timer.
I'm going gonna get a new identifier and I'm going to very quickly call your timeout and pass in that
one one seven.
By calling clear timeout, we are cancelling this timeout right here.
And even after ten seconds, that arrow function right there is not going to be invoked.
The key thing to remember here is that whenever he calls that time out, we get back in identifier.
We can use that idea right there to stop the timer from executing.
That we think about that back inside of our code.
We cannot take this set time out statement.
Maybe a sign, the result of it to a variable called something like I'm out ideas.
I think that sounds reasonable.
And then at some point in time in the future, we can attempt to clear our time out.
Making use of the clear timeout function.
All we do is pass in that I.D..
Now, here's the next big question, next big question is how are we going to somehow get that timer
or seeing that I.D. and cancel it the next time a user type something in?
Well, there's definitely one way you might think to do this.
You might think, yeah, no problem.
Let's just create a new piece of state and keep track of that time out I.D..
That's definitely one way we could accomplish this.
But there is a slightly better way making use of the use, in fact, hook.
Let's take a pause right here.
When come back, we're going to talk about another feature of the use effect took.