Okay.
And once we're clear on Vanilla J's approach now, let's implement that functionality in our application.
So I went back to and PM start.
That's the first thing that I want to let you know because.
As we were setting up the security and all that, we kind of switched back to Node and server and all
that since we already set up the client.
So now since I'm adding those additional features, I just want to let you know that yes, I went back
to the console and I set up the NPM start.
So now I'm running concurrently.
I'm running the front end as well as the back end.
That's why in the browser you see me back on 3001.
So we're going to be done with the features.
We will build this out locally and then we'll be back on 5000.
Hopefully that is clear and we're going to start over here.
By setting up the client.
So in the client, the first thing we want to do is navigate to components and we want to look for a
search container and essentially in here.
I don't want to.
And all this search input using that handle search one that we have before.
Because what happens every time we run it, we update the state.
And then since we're updating the state, we're fetching those requests.
So first I'm going to remove that is loading, but I'll also set up the local one.
So this is going to be a local search and only after certain time expires, then we'll update the global
and hopefully that is clear.
And therefore we need to import two things from React.
We need use state.
This is going to be the local one and already right away import use memo and you'll see in a second
why.
Basically in the next video above, I'll show you why we need to use Memmo, because it's not going
to be as straightforward as with vanilla.
Just keep in mind and react.
We have re renders.
So it's not like just magically function runs one time.
No.
Every time we update something in a state, the function runs again because component re renders.
So let's start here.
I remove this loading I imported use state and now I want to set up the local search variable so I don't
trigger again those requests const then name is up to you.
I'm going to go with local search and that set local search.
That one is equal to use state and let's set it equal to an empty string.
Now let's scroll down and then here the value is not going to be search.
So name is search, but the value won't be searched.
This is not what we're going to display.
We're going to display local search.
And then when it comes to handle change for now, just for now, we'll refactor that in a second.
We'll pass in the anonymous function.
And the reason why I will refactor is a few times because again, this is somewhat complex topic at
least when we cover it the first time.
So I just want to make sure that you understand all the steps in detail.
So in here, let's go with set local search and remember we can go with event dot target and then we're
looking for the value again.
The key here is this As we're going to be typing something, we're not going to trigger that request.
Nothing is going to basically happen over here.
So let me check what's happening in here.
We have console event is not defined.
Yeah, of course the error is here.
When I'm passing the anonymous callback function, we need to set up here the event.
We need to save it.
And now everything should work.
So again, this is happening now locally.
We're not triggering any requests or nothing like that.
Notice how we basically just triggered the first one when the page renders.
But since we're not updating the state, we're not triggering any requests going out.
And of course, in the components, you can take a look at the local one.
Basically, you can take a look at the component tree and you can find and you'll see as we're updating
the local state.
But in my case, I'm not going to do that.
So this is the first step which switched from the global one.
Now we're using the local search.
And then in the next video, I'll make a next step.