Our initial setup works well.
Now we're updating the local state.
But before we can set up the entire functionality, we need to cover the bounce.
Gotcha.
In React and I already kind of talked about it in the previous video.
So let's just try to set up the bounce, the basic setup, and then see where's the gotcha and what
would be the fix.
We're going to start by creating a function.
And let's call this the bounce.
That's our function.
And essentially we want to return another function, correct?
That's going to be our eventual setup.
So before we do anything, let's just log.
The bounce and then let's return that function, Let's say your function.
And then in that function, like I said, eventually we'll run this set local search.
And as you can see, it's looking for event.
So since this is the function that we're returning, we need to pass here the event as well.
And then let's just take this functionality again.
First, we'll just try to do it like we did in vanilla jazz, and then we'll see the gotcha that we
need to be aware of since we're working in React or not anymore in vanilla and jazz.
And now, just like before, what do we want to do?
We want to go with the bounce and invoke it.
Correct.
So we have the bounce function we have over here log and see when basically we're calling it, we invoke
it right from the get go, and then we return a function that's going to be invoked technically every
time we click, correct.
So let's save it and let's see how many times we'll have that bounce in a console.
So let me go back console and now notice I have a bunch of the bounces and then pretty much every time
I'll type, what are we doing?
We are setting the state value, correct?
What happens when we trigger you?
State we trigger re render.
So basically, every time we will invoke this the bounds and that's not what we want because we want
to clear eventually that timeout.
This is very, very important.
Now how we can fix that?
We can use use memo.
So use memo is only going to run this once.
And essentially it's going to get back this function and then we'll pass this function as a callback.
So the code is going to look something like this where we're going to go to const and then optimized.
So as the naming is really up to you, but I'm going to go with optimized.
The bounce.
And then we go with use memo, which we just imported.
And it's looking for two things.
It's looking for the function that's going to be invoked.
And basically we also have the dependency array, just like with use effect, for example.
And in my case, I'm going to leave this empty.
So I only want to run this once.
And then as far as the callback function from that callback function, I want to return whatever I get
back when I invoked the bounds again.
Hopefully it's clear by now that what I'm getting back from that the bounce is this function.
This is where we'll have all our logic.
But the key here is I only want to get it once.
Essentially, I only want to run that the bounce one time.
That's it.
When the application loads, we run that the bounce and then we get the callback function and that's
where we get all the goodies.
So let me keep scrolling and then we'll change this around.
We're not going to invoke the bounce directly in a handle change.
We'll go with optimised and then the bounce.
So this is proper callback function and now let's go back and now once we refresh, check it out.
We only have it once and we can keep typing.
Everything is correct.
We're updating the state value, but the key here is that that's it.
We have only one the bounce in the console, which is awesome because up next, I want to set up that.
Time out, and then I want to clear it.
So just like in the vanilla setup and I think I'm going to remove the lock, I don't think you need
it anymore.
Let's go with let and then timeout ID.
That's the first step.
And then in here.
In the return.
First, what I want to do is set up the local search.
So set local search.
I want to keep on updating the local value.
That is correct.
But we also want to clear a timeout, the previous one, if there was one.
So we want to clear that one.
We'll pass in the timeout.
And then lastly, we need to set up that new timeout.
So what do we want to do in that one second, 2 seconds or whatever?
Well, remember, we have that context variable, correct.
And how we were accessing it.
We were going with handle change and the name is equal to event the target name, and then the value
is event that target that value.
So we have set local search, we have clear timeout.
So now we're clearing the previous one and now we want to set up the new one, Right?
So again, we need to go with timeout ID.
So that's the ID that we'll use in the next.
Run basically the next time we invoke this function.
So let's go with a set timeout and then let's passing that callback function.
So now we need to decide in how long and how long we want to run this one.
Well, in my case, I'm going to go with one second.
So one second after the last keystroke.
And what do we want to do here?
Well, like I said, we want to go with this handle change.
So instead of invoking this on every keystroke.
Now, wait for the last one.
Then we'll wait for one more second, and then we will invoke it.
So again, this is really up to you.
You can go here with search.
Just make sure that it's actually your state value.
Because this will always be search regardless, just make sure that there is no typo and it matches
or you can keep it as a random targeted name.
Since in here the name are going to search so I can leave it like that.
And again, the gotcha here is that since we're passing this event, we'll always have that event,
that target, that value.
But don't make this mistake.
Don't go with local search, because technically you could say, well, these one should match, right?
Because we're updating the local state.
Yeah, we're updating the local state, but we're getting the value when we return this function.
So what is the value initially?
Well, initially it is empty string.
Hopefully this is clear.
So now we can go with even that target value.
And lastly, let's also not forget about clear filters functionality.
Since we switched to local search.
Now we want to set local search equal to an empty string right before we clear filters in handle submit.
And as a result of all these acrobatics.
If we go to the console.
Well, notice that let's say I keep typing and then only at the very end.
I got this one.
I got this search.
So unlike previously where we were setting up requests for every letter or when we were just delaying
it with is loading, now we just bounce it.
Now we delay the execution.
By one second after the last keystroke.
Hopefully this was clear.
I know this is somewhat of a more complex topic for sure.
And also, keep in mind that you don't have to create this function from the scratch each and every
time.
Like I said, there is a.
Function right away in the low dash.
So you can just imported that, you can execute it.
Of course, you need to take a look at the docs, what they require, but you can actually pass in whatever
functionality you want to run and you also can pass in how long and all that.
I just thought that it's very important.
When we do this for the first time, that we clearly understand the main principles of the bonds.
And I guess the biggest gotcha with React is the fact that you get those re renders.
It's not like previously in vanilla Juice.
So in here we need to make sure we use that use memo and then we just get whatever value we get back
from the bonds.
And only once.
Only when the application loads.