1
00:00:01,220 --> 00:00:02,610
Our custom hook is all done.

2
00:00:02,700 --> 00:00:06,930
So let's now take it back over to our app jazz file inside of Abdul G.S..

3
00:00:07,170 --> 00:00:09,570
We are going to import our custom hook at the top.

4
00:00:10,800 --> 00:00:15,450
They'll use videos from up on directory hooks, use videos.

5
00:00:16,470 --> 00:00:20,010
We no longer are using the YouTube API inside of here, so we can delete that import.

6
00:00:21,580 --> 00:00:23,170
We are going to use use effect.

7
00:00:23,230 --> 00:00:26,440
So even though it's kind of great out right now, I'm gonna leave it in there for just a moment.

8
00:00:27,700 --> 00:00:30,670
Now, inside of our app component, we're going to call that hook.

9
00:00:30,820 --> 00:00:33,370
Exactly as though it were any other kind of hook.

10
00:00:33,430 --> 00:00:35,620
Like you state or use effect or something else.

11
00:00:36,770 --> 00:00:39,180
We are going to call use videos.

12
00:00:39,550 --> 00:00:42,690
Remember, this thing expects to be given a default search term.

13
00:00:43,240 --> 00:00:46,800
So I will give it a default search term of buildings just like we had before.

14
00:00:48,390 --> 00:00:54,240
Whenever we call use videos, we then get back in array that has two elements inside of it.

15
00:00:54,480 --> 00:00:58,020
Our list of videos and a function we can use to search for videos.

16
00:00:58,740 --> 00:01:04,020
So I'm going to d structure those two arguments out at array using the same syntax we use with you state.

17
00:01:05,150 --> 00:01:07,710
I'll put in videos and search.

18
00:01:10,110 --> 00:01:12,000
Now, there are two things we need to do inside of here.

19
00:01:12,360 --> 00:01:17,520
First off, we need to make sure that any time we get a new list of videos, we still select automatically

20
00:01:17,610 --> 00:01:20,220
the first list or the first video in that list.

21
00:01:20,940 --> 00:01:25,590
We also need to make sure that anytime the user submits a search term through search bar component,

22
00:01:26,010 --> 00:01:29,010
we continue to do an actual search of the YouTube API.

23
00:01:30,020 --> 00:01:32,100
They're doing that same search very easy.

24
00:01:32,160 --> 00:01:36,600
We can now just provide a reference to the search function instead of on term submit right there.

25
00:01:37,020 --> 00:01:38,880
We'll put in search like so.

26
00:01:40,040 --> 00:01:45,190
That means whenever a user submits a search term, remember, the first argument to inform submit is

27
00:01:45,190 --> 00:01:46,670
gonna be the term the user typed in.

28
00:01:47,210 --> 00:01:48,920
That will call our search function.

29
00:01:49,520 --> 00:01:51,350
That's going to run this function right here.

30
00:01:51,650 --> 00:01:55,700
We're going to receive that term to our search and then update the video's piece of states.

31
00:01:56,720 --> 00:02:02,120
Because we are updating a piece of state and a function that is called by a component, the AB component

32
00:02:02,120 --> 00:02:09,020
is still going to be automatically rendered just the same as though we had the video's piece of state

33
00:02:09,170 --> 00:02:11,660
defined directly inside the Abdala as file.

34
00:02:14,320 --> 00:02:16,150
That's gonna take care of on summit.

35
00:02:16,570 --> 00:02:19,060
Now, we need to also make sure that we still get a selected video.

36
00:02:19,810 --> 00:02:23,950
So we really need to think back to how we were setting a selected video before.

37
00:02:24,070 --> 00:02:25,110
Or essentially win.

38
00:02:25,930 --> 00:02:31,900
So previously we said that immediately after we got a new list of videos, we would select automatically

39
00:02:31,930 --> 00:02:34,390
the first list or the first video inside that list.

40
00:02:35,320 --> 00:02:37,690
Here's why we can do it, to write out some very equivalent logic.

41
00:02:38,500 --> 00:02:39,700
We can call use effect.

42
00:02:41,970 --> 00:02:47,440
And inside of the second argument, we're going to say anytime we get a new list of videos, that's

43
00:02:47,440 --> 00:02:47,860
the key.

44
00:02:48,160 --> 00:02:52,900
Any time we get a new list of videos or any time it changes, we're going to run this function.

45
00:02:53,710 --> 00:02:59,110
So any time we complete a search and we get our new list of videos, we are going to select the very

46
00:02:59,110 --> 00:03:02,410
first video in that list that we will call set selected video.

47
00:03:05,090 --> 00:03:07,460
And provide the first video in that list.

48
00:03:09,680 --> 00:03:09,870
OK.

49
00:03:09,960 --> 00:03:11,410
So believe it or not, this is it.

50
00:03:11,440 --> 00:03:15,730
We have now completed building a custom hook and we are using it inside of our app component.

51
00:03:16,510 --> 00:03:20,050
I do want, you know, that we are going to see one very small warning when we run our code.

52
00:03:20,380 --> 00:03:24,160
But regardless of that warning, everything we have inside of here is still going to work.

53
00:03:25,120 --> 00:03:28,120
It's let's go back over and test this out really quickly.

54
00:03:29,520 --> 00:03:31,180
OK, so I still see videos appear.

55
00:03:31,410 --> 00:03:34,140
The first video inside this list is still automatically selected.

56
00:03:34,860 --> 00:03:38,760
I can still select other videos and I can still put in a search.

57
00:03:39,570 --> 00:03:42,500
And the first video in that list gets selected as well.

58
00:03:43,330 --> 00:03:45,510
It appears that everything works as expected.

59
00:03:46,520 --> 00:03:50,130
Now, let's take care of some different warnings and what that we have inside of your really quickly.

60
00:03:51,060 --> 00:03:53,970
First off, I go to the very top, my console.

61
00:03:55,440 --> 00:04:00,390
You might see a warning inside of here around react, hook use effect has a missing dependancy default

62
00:04:00,390 --> 00:04:00,990
search term.

63
00:04:01,950 --> 00:04:08,220
Well, that means that back inside of our use videos hook right here, whenever we make use of some

64
00:04:08,310 --> 00:04:14,490
outside variable, inside use effect, react wants us to list that argument right there or that variable

65
00:04:14,490 --> 00:04:17,790
that we're making use of inside of a use effect inside of this aero function.

66
00:04:18,330 --> 00:04:22,740
The reason for that is that it solves a lot of stale data references, something that we'll take a look

67
00:04:22,740 --> 00:04:23,910
at later on, set the course.

68
00:04:24,270 --> 00:04:29,100
Right now, we're going to do what REAC says and put in default search term like so.

69
00:04:30,100 --> 00:04:31,780
This actually does have a good benefit to it.

70
00:04:32,200 --> 00:04:38,230
Now, if we ever decide to call use videos again, but provide a different default search term instead

71
00:04:38,230 --> 00:04:42,850
of buildings right here, maybe we change it for some reason based on some outside prop that flows into

72
00:04:42,850 --> 00:04:43,510
the up component.

73
00:04:44,060 --> 00:04:47,680
Then we're going to make sure that we automatically refresh our list of default videos.

74
00:04:47,830 --> 00:04:48,130
Again.

75
00:04:49,330 --> 00:04:50,170
So we save that.

76
00:04:51,100 --> 00:04:52,570
Now, that warning should go away.

77
00:04:53,110 --> 00:04:55,020
I do still see a lot of other warnings and errors.

78
00:04:55,060 --> 00:04:58,600
But all these are truly fine, not really related to the record that we have written.

79
00:04:59,890 --> 00:05:00,080
OK.

80
00:05:00,320 --> 00:05:01,390
Well, that is pretty much it.

81
00:05:02,380 --> 00:05:03,660
So, again, custom hooks.

82
00:05:04,060 --> 00:05:05,410
Very tricky to understand.

83
00:05:05,620 --> 00:05:07,900
The first time you see it, you might be thinking.

84
00:05:07,990 --> 00:05:08,350
All right.

85
00:05:08,380 --> 00:05:09,100
So many questions.

86
00:05:09,100 --> 00:05:09,730
What's going on here?

87
00:05:09,740 --> 00:05:10,420
What's going on here?

88
00:05:10,930 --> 00:05:14,560
Like I said, this is one of the things where you just have to write your own code.

89
00:05:14,620 --> 00:05:17,860
You have to do this on your own a little bit before it can make any sense.

90
00:05:18,080 --> 00:05:22,600
And there's really not any tutorial or magic video out there that's going to give you a perfect understanding

91
00:05:22,690 --> 00:05:24,100
of how custom hooks work.

92
00:05:25,100 --> 00:05:28,260
Well, having said that, let's take a pause here and continue in just a moment.