With that additional knowledge around the use effect function, we can now properly clean up or cancel
that time out.
So at the very bottom of our use effect function, we're going to return an arrow function.
And inside of there we'll do a clear time out of time out.
I.D. like some.
All right.
Let's first take another look at our diagram and just clarify what we are now doing.
Now, whenever a user first clicks or types inside of that input, we are going to immediately set a
timer to search in five hundred milliseconds.
And we return that cleanup function.
We not function does not get invoked right away.
Instead, the next time a user type something, we're gonna cancel the previous timer and set up another
one.
If the user types something again, cancel a previous timer, set up another one, we're gonna repeat
this process over and over and over again until five hundred milliseconds goes by without USIE fact
being invoked.
So those five milliseconds go by.
We're going to execute that timer automatically.
We do our search, the API.
We update our results piece of state and we should see our results appear on the screen.
Let's now give this a shot.
All right, so back over here.
I'm going to open up my network request tab.
And then I'll start to type inside of your.
And as I typed everything out, I don't see any requests being issued until after I typed out last character.
And five hundred milliseconds elapse.
Let's try that again.
I'll delete everything.
Program.
There we go.
Five milliseconds after.
If I type too slowly.
You can see that still do get that immediate search, but only if I type really slow.
If we want to, we can also adjust that five hundred millisecond time out so we can make it say one
second instead.
If we make it one second now, we're gonna have that much more time to type something in before the
search is triggered.
Now, I can do pro and see how slowly I'm typing now.
We're not wasting any requests until a second after we finally do our search and see results on the
screen.
All right, so it looks pretty good.
Now, there is one downside to how we have written out our code inside of your so far, the one downside
at present is that we do not do any initial search until after one second the lapses when our application
first starts up.
We can see that very easily if we just go back where the browser and refresh the page to notice.
And now it takes one second before we do that initial search with programming.
This definitely works.
It kind of solves the problem of making too many requests when a user is typing, but it's not perfect.
We now have this kind of annoying delay that is preventing content from appearing on the screen right
away.
So looks like we still have one last little problem to solve.
Let's take care of that in the next video.