1
00:00:00,870 --> 00:00:03,200
We are all done refactoring our search bar component.

2
00:00:03,280 --> 00:00:05,890
So we're not going to start to refactor the app J.S. file.

3
00:00:06,610 --> 00:00:08,950
We're going to once again go through the thing line by line.

4
00:00:09,280 --> 00:00:13,480
We're going to first understand the different hooks that we're going to need to use in our new function

5
00:00:13,480 --> 00:00:14,890
version of the app component.

6
00:00:15,460 --> 00:00:18,250
And we're going to start to move all of our code over line by line.

7
00:00:19,090 --> 00:00:24,940
So as I look at our class app right now, I noticed right away that is making use of state and inside

8
00:00:24,940 --> 00:00:25,740
the state object.

9
00:00:25,780 --> 00:00:27,730
We are declaring two separate properties.

10
00:00:28,420 --> 00:00:33,580
That means that inside of our function component, we will need to make use of the use state hook twice,

11
00:00:34,030 --> 00:00:39,280
once to declare a piece of state called videos and wants to declare a piece of state called selected

12
00:00:39,280 --> 00:00:39,670
video.

13
00:00:40,920 --> 00:00:44,970
Then right after that, we are making use of the component did Mount Life-cycle method.

14
00:00:45,810 --> 00:00:51,000
That means we will need to use the use effect hook inside of our function component as well, because

15
00:00:51,020 --> 00:00:54,780
use effect is roughly equivalent in nature to a lifecycle method.

16
00:00:55,700 --> 00:00:56,390
You on that?

17
00:00:56,480 --> 00:00:58,730
I just see a couple of different callback functions.

18
00:00:59,000 --> 00:01:01,550
There's one there's one render method.

19
00:01:01,700 --> 00:01:02,690
And that's pretty much it.

20
00:01:03,540 --> 00:01:07,070
I think that all we really need here is two pieces of states.

21
00:01:07,250 --> 00:01:10,490
A U.S. fact took and copy pasting a lot of code around.

22
00:01:11,560 --> 00:01:18,130
To get started at the very top to file from react, I'm going to import you states and use effect.

23
00:01:20,230 --> 00:01:25,140
Then right above class AB, I'm going to declare a new function component called out as well.

24
00:01:26,710 --> 00:01:27,400
At the very top.

25
00:01:28,670 --> 00:01:30,380
We'll declare are two pieces of state.

26
00:01:30,740 --> 00:01:33,290
We'll call them videos and selected video.

27
00:01:34,620 --> 00:01:35,610
We'll get videos.

28
00:01:38,780 --> 00:01:40,800
We'll provide a default value of an empty array.

29
00:01:42,070 --> 00:01:43,150
And selected.

30
00:01:44,320 --> 00:01:47,690
Video with set selected video.

31
00:01:49,600 --> 00:01:51,730
And for that, we'll give a default value of not.

32
00:01:54,690 --> 00:01:55,230
Alex, good.

33
00:01:55,900 --> 00:01:58,030
I'll then delete that state declaration.

34
00:02:00,730 --> 00:02:06,070
Next up, I'm going to make use of the use effect took remember, component did mount is going to only

35
00:02:06,070 --> 00:02:12,040
run one time for our app component when the app component first is rendered onto the screen to make

36
00:02:12,040 --> 00:02:17,170
use of the use effect hook and get some roughly equivalent functionality we can call use effect.

37
00:02:18,640 --> 00:02:22,850
And then provide a second element or a second argument of an empty array.

38
00:02:23,130 --> 00:02:25,720
And remember, empty array means run this function right here.

39
00:02:25,810 --> 00:02:32,230
Only one time you can think of this form of use effect as being roughly equivalent to component did

40
00:02:32,230 --> 00:02:32,620
mount.

41
00:02:34,650 --> 00:02:35,730
We can then move over.

42
00:02:37,050 --> 00:02:41,400
That on term summit, we're going to cut that paste it in like so.

43
00:02:43,010 --> 00:02:47,150
And again, we don't have any idea or concept of this inside of a function component.

44
00:02:47,510 --> 00:02:52,130
So we will remove the this dot and we are left with only on term simit.

45
00:02:54,560 --> 00:02:56,090
Then delete component in Mount.

46
00:02:58,760 --> 00:03:04,220
OK, so next up, we've got on term summit, that's where we take some term, do the search and then

47
00:03:04,280 --> 00:03:05,190
update our state.

48
00:03:06,230 --> 00:03:08,480
Once again, let's just take that entire function.

49
00:03:11,730 --> 00:03:13,930
And then pasted directly after use effect.

50
00:03:15,580 --> 00:03:18,910
I'll make sure that I put in concert in front of on term submit.

51
00:03:20,040 --> 00:03:23,520
And then inside of here, we're gonna do a quick scan through and make sure that we don't have any references

52
00:03:23,520 --> 00:03:28,260
to things like this or this doc props or distort state or anything like that.

53
00:03:29,240 --> 00:03:32,400
The first looking at the request, and that all looks good to me.

54
00:03:34,120 --> 00:03:40,090
Then looking after that, we've got a call to this dot set state, do we need to take this entire state

55
00:03:40,300 --> 00:03:43,870
set state call and divided into two separate function calls?

56
00:03:44,380 --> 00:03:49,060
One is gonna be a call to set videos to update our videos, piece of state and the other vehicle to

57
00:03:49,090 --> 00:03:53,020
set selected video to update the selected video piece of state.

58
00:03:56,840 --> 00:04:01,100
Right above the set state, we're going to do a set videos.

59
00:04:02,190 --> 00:04:05,010
And provide response data items.

60
00:04:06,570 --> 00:04:12,800
And then set selected video and provide response data items at zero.

61
00:04:13,890 --> 00:04:16,650
We can then delete the entire this dot set state call.

62
00:04:18,850 --> 00:04:19,110
All right.

63
00:04:19,310 --> 00:04:20,740
That's it for on term summit.

64
00:04:23,370 --> 00:04:24,300
Now, what do we have next?

65
00:04:24,950 --> 00:04:26,700
Well, we've got on video select.

66
00:04:27,340 --> 00:04:27,460
OK.

67
00:04:27,540 --> 00:04:28,500
That's gonna be easy one.

68
00:04:28,590 --> 00:04:29,970
So we'll cut that as well.

69
00:04:32,920 --> 00:04:33,740
But it right after.

70
00:04:33,830 --> 00:04:35,810
On term submit inside of our function component.

71
00:04:37,270 --> 00:04:38,140
Ro Konsta on their.

72
00:04:40,600 --> 00:04:44,700
And then inside the body, that function, we definitely of a call to this state said state.

73
00:04:44,770 --> 00:04:46,330
Again, no idea of set state.

74
00:04:46,720 --> 00:04:48,190
So we can delete that entire line.

75
00:04:49,400 --> 00:04:51,920
And replace it with set selected.

76
00:04:53,020 --> 00:04:55,900
Video and provide the video that we want to select.

77
00:04:59,750 --> 00:05:03,060
The last thing is our big J.S. X block down here.

78
00:05:03,660 --> 00:05:05,340
Once again, we'll take the entire return statement.

79
00:05:06,540 --> 00:05:10,480
So everything from return down to the closing parentheses.

80
00:05:11,920 --> 00:05:14,380
A cut that leaves behind just the render function.

81
00:05:16,390 --> 00:05:18,990
I'll then go up to my function components and right after.

82
00:05:19,010 --> 00:05:20,000
On video select.

83
00:05:20,420 --> 00:05:22,400
I will paste in that entire return block.

84
00:05:23,250 --> 00:05:26,230
And then we could go through here and update everything line by line.

85
00:05:27,460 --> 00:05:29,430
So first off, we've got our search bar component.

86
00:05:30,450 --> 00:05:35,310
We have to provide a function to call whenever a user submits a term.

87
00:05:35,940 --> 00:05:40,140
And that function that we provide right there will be called with a search term that the user entered.

88
00:05:41,170 --> 00:05:44,560
So in our case, we've still got this on term simit function right here.

89
00:05:45,610 --> 00:05:47,800
We're going to provide that to the on form summit.

90
00:05:48,430 --> 00:05:50,410
That's going be on term simit.

91
00:05:53,520 --> 00:05:55,260
Next up is our video detail.

92
00:05:55,700 --> 00:05:57,990
We are providing a prop of the currently selected video.

93
00:05:58,530 --> 00:06:00,140
Once again, there's no this state.

94
00:06:00,300 --> 00:06:03,990
We just have a single variable inside this component called selected video.

95
00:06:04,410 --> 00:06:08,880
So we will delete the this dot state dot and leave behind just selected video.

96
00:06:10,590 --> 00:06:12,230
And then finally on video list.

97
00:06:14,270 --> 00:06:16,610
We no longer have a dot on video select.

98
00:06:16,700 --> 00:06:19,910
Instead, we've got the on video select function by itself.

99
00:06:20,480 --> 00:06:21,980
We'll just provide a reference to that.

100
00:06:23,890 --> 00:06:27,850
And then in addition, there is no this dot state dot videos, there is just videos.

101
00:06:30,550 --> 00:06:31,780
We can then go down to the bottom.

102
00:06:32,010 --> 00:06:35,500
The lead the class app that is left behind, and that is pretty much it.

103
00:06:37,460 --> 00:06:42,110
Now, at this point, we have refactored from a class based component into a function component.

104
00:06:42,470 --> 00:06:45,720
There are definitely some improvements we can make on this function component.

105
00:06:45,740 --> 00:06:51,170
Right now, I want you to notice that by just making use of hooks, we have not necessarily improved

106
00:06:51,170 --> 00:06:55,460
the legibility or the reuse or anything like that of our app component.

107
00:06:55,550 --> 00:06:58,070
It is simply, at this point, a slightly different syntax.

108
00:06:58,730 --> 00:07:01,430
So this is actually really important for you to understand in the community.

109
00:07:01,500 --> 00:07:07,250
There's a lot of interest and excitement around hooks, but making use of hooks just do not automatically

110
00:07:07,310 --> 00:07:10,670
make your code better than making a sort of a class based component.

111
00:07:11,300 --> 00:07:13,580
If you want to make your code better, you can use hooks.

112
00:07:13,610 --> 00:07:18,770
But you have to do some additional work on top of that, that we absolutely can refactor the thing and

113
00:07:18,770 --> 00:07:23,230
make this code way more legible, but it will require more work on our end.

114
00:07:24,800 --> 00:07:27,170
Now, the very last thing we'll do very quickly is save this file.

115
00:07:28,040 --> 00:07:31,190
Let's go back over to the browser and just make sure everything still works.

116
00:07:31,940 --> 00:07:32,810
Open up my console.

117
00:07:32,840 --> 00:07:34,880
Just make sure I don't get any errors from our code.

118
00:07:35,330 --> 00:07:38,810
Remember, you might see some error blocked by client or stuff like that.

119
00:07:39,080 --> 00:07:39,950
That's totally fine.

120
00:07:40,280 --> 00:07:45,670
Those in my case in particular, I'm running an ad blocker and it's blocking some ads tied to the YouTube

121
00:07:45,710 --> 00:07:46,490
I frame right here.

122
00:07:47,540 --> 00:07:49,040
It's all do a search for forest.

123
00:07:50,240 --> 00:07:53,120
And I can still click on a video and play it.

124
00:07:54,440 --> 00:07:54,690
OK.

125
00:07:55,300 --> 00:07:59,980
Well, that is the re factor that we are making use of hooks now instead of class based components.

126
00:08:00,250 --> 00:08:04,720
But like I said, we could probably figure out one or two ways to condense down our app component right

127
00:08:04,720 --> 00:08:04,980
now.

128
00:08:05,350 --> 00:08:06,790
Let's take care of that in just a moment.