1
00:00:00,300 --> 00:00:00,590
Okay.

2
00:00:00,630 --> 00:00:08,760
And once we're clear on Vanilla J's approach now, let's implement that functionality in our application.

3
00:00:09,090 --> 00:00:13,020
So I went back to and PM start.

4
00:00:13,110 --> 00:00:15,720
That's the first thing that I want to let you know because.

5
00:00:16,470 --> 00:00:22,380
As we were setting up the security and all that, we kind of switched back to Node and server and all

6
00:00:22,380 --> 00:00:25,040
that since we already set up the client.

7
00:00:25,050 --> 00:00:30,660
So now since I'm adding those additional features, I just want to let you know that yes, I went back

8
00:00:30,660 --> 00:00:34,950
to the console and I set up the NPM start.

9
00:00:34,950 --> 00:00:36,930
So now I'm running concurrently.

10
00:00:37,140 --> 00:00:39,660
I'm running the front end as well as the back end.

11
00:00:39,900 --> 00:00:44,340
That's why in the browser you see me back on 3001.

12
00:00:44,340 --> 00:00:46,020
So we're going to be done with the features.

13
00:00:46,530 --> 00:00:50,880
We will build this out locally and then we'll be back on 5000.

14
00:00:50,880 --> 00:00:54,360
Hopefully that is clear and we're going to start over here.

15
00:00:55,100 --> 00:00:56,990
By setting up the client.

16
00:00:57,710 --> 00:01:03,800
So in the client, the first thing we want to do is navigate to components and we want to look for a

17
00:01:03,800 --> 00:01:06,890
search container and essentially in here.

18
00:01:07,540 --> 00:01:08,860
I don't want to.

19
00:01:09,670 --> 00:01:15,340
And all this search input using that handle search one that we have before.

20
00:01:15,340 --> 00:01:19,330
Because what happens every time we run it, we update the state.

21
00:01:19,600 --> 00:01:23,530
And then since we're updating the state, we're fetching those requests.

22
00:01:23,530 --> 00:01:30,220
So first I'm going to remove that is loading, but I'll also set up the local one.

23
00:01:30,340 --> 00:01:38,310
So this is going to be a local search and only after certain time expires, then we'll update the global

24
00:01:38,320 --> 00:01:40,270
and hopefully that is clear.

25
00:01:40,270 --> 00:01:43,780
And therefore we need to import two things from React.

26
00:01:43,780 --> 00:01:44,830
We need use state.

27
00:01:44,830 --> 00:01:50,020
This is going to be the local one and already right away import use memo and you'll see in a second

28
00:01:50,020 --> 00:01:50,530
why.

29
00:01:50,560 --> 00:01:56,260
Basically in the next video above, I'll show you why we need to use Memmo, because it's not going

30
00:01:56,260 --> 00:01:57,910
to be as straightforward as with vanilla.

31
00:01:57,910 --> 00:02:00,520
Just keep in mind and react.

32
00:02:00,520 --> 00:02:01,900
We have re renders.

33
00:02:01,900 --> 00:02:04,600
So it's not like just magically function runs one time.

34
00:02:04,600 --> 00:02:04,810
No.

35
00:02:04,810 --> 00:02:12,880
Every time we update something in a state, the function runs again because component re renders.

36
00:02:13,030 --> 00:02:14,050
So let's start here.

37
00:02:14,050 --> 00:02:19,870
I remove this loading I imported use state and now I want to set up the local search variable so I don't

38
00:02:19,870 --> 00:02:24,670
trigger again those requests const then name is up to you.

39
00:02:24,670 --> 00:02:30,790
I'm going to go with local search and that set local search.

40
00:02:30,870 --> 00:02:36,460
That one is equal to use state and let's set it equal to an empty string.

41
00:02:36,790 --> 00:02:41,770
Now let's scroll down and then here the value is not going to be search.

42
00:02:42,070 --> 00:02:44,710
So name is search, but the value won't be searched.

43
00:02:44,710 --> 00:02:46,870
This is not what we're going to display.

44
00:02:47,050 --> 00:02:49,540
We're going to display local search.

45
00:02:49,540 --> 00:02:54,850
And then when it comes to handle change for now, just for now, we'll refactor that in a second.

46
00:02:54,850 --> 00:02:57,400
We'll pass in the anonymous function.

47
00:02:57,550 --> 00:03:03,010
And the reason why I will refactor is a few times because again, this is somewhat complex topic at

48
00:03:03,010 --> 00:03:05,290
least when we cover it the first time.

49
00:03:05,290 --> 00:03:10,330
So I just want to make sure that you understand all the steps in detail.

50
00:03:10,350 --> 00:03:17,860
So in here, let's go with set local search and remember we can go with event dot target and then we're

51
00:03:17,860 --> 00:03:19,900
looking for the value again.

52
00:03:19,900 --> 00:03:26,770
The key here is this As we're going to be typing something, we're not going to trigger that request.

53
00:03:26,770 --> 00:03:29,020
Nothing is going to basically happen over here.

54
00:03:29,290 --> 00:03:31,720
So let me check what's happening in here.

55
00:03:31,720 --> 00:03:35,410
We have console event is not defined.

56
00:03:35,410 --> 00:03:37,180
Yeah, of course the error is here.

57
00:03:37,180 --> 00:03:42,340
When I'm passing the anonymous callback function, we need to set up here the event.

58
00:03:42,850 --> 00:03:43,900
We need to save it.

59
00:03:43,900 --> 00:03:45,640
And now everything should work.

60
00:03:45,910 --> 00:03:48,190
So again, this is happening now locally.

61
00:03:48,220 --> 00:03:51,190
We're not triggering any requests or nothing like that.

62
00:03:51,220 --> 00:03:55,690
Notice how we basically just triggered the first one when the page renders.

63
00:03:55,690 --> 00:04:01,870
But since we're not updating the state, we're not triggering any requests going out.

64
00:04:01,870 --> 00:04:05,890
And of course, in the components, you can take a look at the local one.

65
00:04:05,890 --> 00:04:10,870
Basically, you can take a look at the component tree and you can find and you'll see as we're updating

66
00:04:10,870 --> 00:04:11,590
the local state.

67
00:04:11,590 --> 00:04:14,980
But in my case, I'm not going to do that.

68
00:04:14,980 --> 00:04:19,329
So this is the first step which switched from the global one.

69
00:04:19,329 --> 00:04:21,160
Now we're using the local search.

70
00:04:21,160 --> 00:04:24,220
And then in the next video, I'll make a next step.