1
00:00:01,790 --> 00:00:06,500
Well, we now need to add in some code to take the search term that the users entered and make a request

2
00:00:06,530 --> 00:00:07,970
off to the Wikipedia API.

3
00:00:08,870 --> 00:00:11,030
I've got a very practical question here.

4
00:00:11,480 --> 00:00:13,100
Where are we going to write the code for that?

5
00:00:13,430 --> 00:00:15,860
Where we gonna write the code to actually make that request?

6
00:00:16,490 --> 00:00:19,400
I think there are two possible options available to us.

7
00:00:19,620 --> 00:00:21,960
Those take a look at a diagram and understand what they are.

8
00:00:26,640 --> 00:00:27,690
We have two options.

9
00:00:27,840 --> 00:00:33,780
I've listed out a flow of series or a flow of actions for option number one on the left and for option

10
00:00:33,780 --> 00:00:34,860
number two on the right.

11
00:00:35,400 --> 00:00:38,160
We're going to first focus on the possible searching.

12
00:00:38,220 --> 00:00:39,360
Option number one.

13
00:00:40,260 --> 00:00:43,200
Let's zoom in here just to be able to read the stuff nice and easy.

14
00:00:44,310 --> 00:00:44,560
All right.

15
00:00:44,610 --> 00:00:47,370
So user at some point time is going to type into that text input.

16
00:00:47,670 --> 00:00:48,750
Remember what I just told you?

17
00:00:48,810 --> 00:00:53,670
We want to make sure that whenever a user types into the input, we immediately make a request to the

18
00:00:53,670 --> 00:00:54,720
Wikipedia API.

19
00:00:55,450 --> 00:01:00,090
The one way we could do that is to add in some code to the on change, even handler.

20
00:01:00,790 --> 00:01:06,060
So inside that on change event handler, we could add in some code to take the value from the input

21
00:01:06,330 --> 00:01:09,960
and make a request immediately over to the Wikipedia API.

22
00:01:11,070 --> 00:01:13,920
It, of course, takes some time to get that or to make that request.

23
00:01:14,310 --> 00:01:16,260
Well, after a very short period of time.

24
00:01:16,320 --> 00:01:17,460
We would then get a response.

25
00:01:18,270 --> 00:01:22,710
We could take some data out of that response and use it to update maybe some piece of state that we

26
00:01:22,710 --> 00:01:23,760
call results.

27
00:01:23,870 --> 00:01:29,190
And that would be the list of search results like this array right here of objects.

28
00:01:31,640 --> 00:01:35,750
And then because we are updating a piece of states, our component would re render and we could render

29
00:01:35,750 --> 00:01:37,520
out a list of all those results.

30
00:01:38,370 --> 00:01:42,530
But this approach right here, approach number one, very simple and straightforward.

31
00:01:43,250 --> 00:01:45,530
However, it does have a downside.

32
00:01:46,130 --> 00:01:50,990
Let's first take a look at option number two and we'll compare and contrast the pros and cons with both

33
00:01:50,990 --> 00:01:51,710
these options.

34
00:01:53,270 --> 00:01:55,970
With option number two, this one is definitely more complex.

35
00:01:56,000 --> 00:01:58,850
But you're going to see that there are some really big upsides to it.

36
00:01:59,800 --> 00:02:02,720
With option number two, we're gonna have users still type in that input.

37
00:02:03,110 --> 00:02:05,090
So going to have the event change or on change.

38
00:02:05,090 --> 00:02:06,020
Event handler called.

39
00:02:07,230 --> 00:02:12,390
And we're going to continue to just allow that on change event handler to update our term piece of state

40
00:02:13,050 --> 00:02:16,230
because we are updating a piece of state our component will re render.

41
00:02:16,770 --> 00:02:18,030
And now here is the key.

42
00:02:18,060 --> 00:02:22,050
Here is the whole key to option number two inside of our component.

43
00:02:22,230 --> 00:02:30,000
We can add in some code to detect that our component is re rendering and that the term piece of state

44
00:02:30,090 --> 00:02:30,870
has changed.

45
00:02:31,660 --> 00:02:33,270
So this is the real key part right here.

46
00:02:33,600 --> 00:02:38,790
We are going to add in some code to detect that our component is re rendering and that the term piece

47
00:02:38,790 --> 00:02:39,810
of state has changed.

48
00:02:41,730 --> 00:02:46,720
Once we detect that it's re rendering and term is changed, we will then make a request to the API.

49
00:02:47,430 --> 00:02:49,140
And then after a brief period of time, we'll get back.

50
00:02:49,150 --> 00:02:51,150
Response update results, piece of state.

51
00:02:51,480 --> 00:02:53,130
Are components going to re render again?

52
00:02:53,310 --> 00:02:55,410
And we'll show our list of results to the user.

53
00:02:56,690 --> 00:03:01,460
The big difference here between these two approaches is whether we want to attempt to make the request

54
00:03:01,520 --> 00:03:07,340
immediately inside the launching Chandler or whether we want to only update some piece of state and

55
00:03:07,340 --> 00:03:12,950
then make the request only after our component begins to re render and we detect that term has changed.

56
00:03:14,090 --> 00:03:19,310
Now, again, option number one probably seems really easy and straightforward, but like I said, there

57
00:03:19,310 --> 00:03:21,800
are some very good reasons to go with option number two.

58
00:03:22,660 --> 00:03:24,290
So let's look at some pros and cons.

59
00:03:25,240 --> 00:03:30,250
With option number one, even though it's really simple and easy to understand it, definitely Titli

60
00:03:30,250 --> 00:03:34,330
couples are searching code with the on change event handler.

61
00:03:34,960 --> 00:03:38,270
In other words, we're going to have some very specific code inside that even handler.

62
00:03:38,320 --> 00:03:42,510
That's going to take the current search term and make that request and then update some piece of state.

63
00:03:44,300 --> 00:03:49,880
With option number two, however, we can very easily kind of decouple or extract that searching code

64
00:03:50,210 --> 00:03:53,000
from anything related to an unchanged event.

65
00:03:53,550 --> 00:03:54,650
Now, why is that relevant?

66
00:03:54,950 --> 00:03:55,670
Why do we care?

67
00:03:56,390 --> 00:04:00,710
At the other day, we probably could figure out some way to extract all this on change code into some

68
00:04:00,710 --> 00:04:01,700
kind of helper function.

69
00:04:02,270 --> 00:04:07,400
But the reason that option number two is so great is that we can very easily somehow trigger a search

70
00:04:07,490 --> 00:04:12,110
if some other parameter changed inside of application with option number one.

71
00:04:12,140 --> 00:04:15,950
We are only doing a search win on change event handler fires.

72
00:04:16,160 --> 00:04:16,670
That's it.

73
00:04:17,450 --> 00:04:22,430
With option number two, we could very, very easily say that if there is some other piece of information

74
00:04:22,520 --> 00:04:26,030
that a user is going to enter, we could very easily trigger a search.

75
00:04:26,360 --> 00:04:27,260
And when will that occur?

76
00:04:27,860 --> 00:04:31,550
Well, remember just a moment ago I did a search of the Wikipedia over here.

77
00:04:31,550 --> 00:04:37,520
I put in program and you're seeing some results here where everything is kind of organized by category.

78
00:04:37,850 --> 00:04:43,310
So I see some programming or program search results related to arts and entertainment, science and

79
00:04:43,310 --> 00:04:45,290
technology and some other stuff.

80
00:04:45,870 --> 00:04:51,720
The inside of our search widget, we might eventually decide to put in some kind of maybe category selector.

81
00:04:52,160 --> 00:04:57,230
Maybe we can put in some kind of dropdown that says I want to search for the term program in the world

82
00:04:57,290 --> 00:05:01,610
of arts and entertainment or in the world of science and technology.

83
00:05:02,300 --> 00:05:07,640
If we had some additional search criteria like that, we would probably want to trigger a search whenever

84
00:05:07,640 --> 00:05:12,630
the user edits a search term or changes the category that they are trying to search for.

85
00:05:12,770 --> 00:05:13,160
From.

86
00:05:14,180 --> 00:05:19,500
So in that scenario, we would then have two pieces of information that would need to trigger a search.

87
00:05:20,400 --> 00:05:26,730
And if we use option number two, it would be extremely easy to add in that additional search or that

88
00:05:26,730 --> 00:05:27,630
additional parameter.

89
00:05:28,320 --> 00:05:31,080
Now, again, we could definitely do this with option number one.

90
00:05:31,170 --> 00:05:36,390
It's definitely possible, but it's just significantly easier as you're going to come to find with option

91
00:05:36,390 --> 00:05:36,930
number two.

92
00:05:38,030 --> 00:05:39,890
So that is why we're going to go with option number two.

93
00:05:40,380 --> 00:05:41,120
We are going to.

94
00:05:42,530 --> 00:05:44,180
Leave our unchanged event handler.

95
00:05:44,210 --> 00:05:48,850
The way it is right now, and we're going to say that anytime our component renders.

96
00:05:49,220 --> 00:05:50,630
We need to add in some code.

97
00:05:50,660 --> 00:05:55,280
That's going to detect that we are are re rendering and that the term piece of state has changed.

98
00:05:56,370 --> 00:06:03,060
And this is where the use effect hook comes from, the U.S. Factbook is what allows us to put together

99
00:06:03,120 --> 00:06:07,830
this step right here, whose effect allows us to write out some code that detects that our component

100
00:06:07,830 --> 00:06:11,130
is rendering and some piece of information has changed.

101
00:06:11,610 --> 00:06:13,920
And that's going to allow us to run some additional code.

102
00:06:14,960 --> 00:06:20,270
OK, so now that we've got kind of a reason, albeit kind of tenuous, I, I told you, imagine right

103
00:06:20,270 --> 00:06:23,050
now you can think of a way to implement option number one.

104
00:06:23,060 --> 00:06:26,150
And I'm sure you're thinking, oh, yeah, I'd be so easy and just fine.

105
00:06:26,390 --> 00:06:26,780
I know.

106
00:06:26,840 --> 00:06:27,170
I know.

107
00:06:27,230 --> 00:06:30,770
But we are going to go with option number two again, even though it's kind of hard to see right now.

108
00:06:30,800 --> 00:06:33,350
This is definitely a better way of implementing this.

109
00:06:34,390 --> 00:06:35,740
So we're going to take a pause right here.

110
00:06:35,830 --> 00:06:36,320
We're gonna come back.

111
00:06:36,340 --> 00:06:41,080
Next video and we're going to take a look at this use effect hook and understand how we can use it to

112
00:06:41,080 --> 00:06:43,980
detect that the term piece of state has changed.