1
00:00:01,770 --> 00:00:05,520
Well, here is our list of steps we're going to use to create a reusable custom hook.

2
00:00:05,740 --> 00:00:09,930
Now, remember, I just said two moments ago, it's really challenging for me to give you a foolproof

3
00:00:09,930 --> 00:00:13,140
list of steps to follow, though, if these steps don't make any sense.

4
00:00:13,200 --> 00:00:17,940
I apologize, but really, this is some stuff that's kind of hard to put into a video and have.

5
00:00:17,940 --> 00:00:22,560
It really makes sense without you working on your own exercises and whatnot and really struggling for

6
00:00:22,560 --> 00:00:22,920
a while.

7
00:00:23,580 --> 00:00:23,730
All right.

8
00:00:23,730 --> 00:00:24,570
Enough excuses.

9
00:00:24,630 --> 00:00:26,130
Let's go through this thing step by step.

10
00:00:26,970 --> 00:00:32,310
The first thing we're going to do when building a reusable custom hook is take a look at existing components.

11
00:00:32,690 --> 00:00:38,640
And inside of some existing component, we're going to identify each line of code related to some singular

12
00:00:38,640 --> 00:00:39,240
purpose.

13
00:00:40,080 --> 00:00:46,230
So in our case, we're going to look at all the non JSC stuff inside of our app component and line by

14
00:00:46,230 --> 00:00:46,560
line.

15
00:00:46,680 --> 00:00:49,520
We're going to try to identify the purpose of that code.

16
00:00:50,610 --> 00:00:55,770
So inside of everything, inside the app component, we really have two major goals.

17
00:00:56,070 --> 00:01:01,380
We're really working with two pieces of state and all this code is related to managing those two pieces

18
00:01:01,380 --> 00:01:01,880
of states.

19
00:01:02,160 --> 00:01:05,520
They are our list of videos and a selected video.

20
00:01:07,070 --> 00:01:11,710
So as we think about each line of code inside of here, the first two are really easy to assign a goal

21
00:01:11,710 --> 00:01:12,490
or purpose to.

22
00:01:13,210 --> 00:01:16,960
The first you state line right here is all about managing a list of videos.

23
00:01:17,360 --> 00:01:21,040
And the second line of code is all about managing a currently selected video.

24
00:01:22,280 --> 00:01:23,780
Next up is the entire U.S.

25
00:01:23,840 --> 00:01:29,000
Effect statement, this entire call right here is really about getting a list of videos.

26
00:01:29,540 --> 00:01:33,620
Now, as soon as I see that, you might disagree with me big time this good right here.

27
00:01:33,800 --> 00:01:35,960
Yes, it is about fetching a list of videos.

28
00:01:36,080 --> 00:01:37,880
And so that's why I put videos right here.

29
00:01:38,090 --> 00:01:43,310
But you might disagree with me and you might say, well, Steven, if we don't get your list of videos,

30
00:01:43,850 --> 00:01:45,620
then we can't have a selected video.

31
00:01:45,650 --> 00:01:50,510
So you might say that this is equally parts about videos and a selected video.

32
00:01:51,320 --> 00:01:57,440
Well, my response to that to you is, yes, without having a list of videos or without fetching a list

33
00:01:57,440 --> 00:01:59,300
of videos, we can't have a currently selected video.

34
00:01:59,900 --> 00:02:05,960
However, the relationship between the videos piece of states and selection is actually really interesting.

35
00:02:06,620 --> 00:02:14,030
In our case, the currently selected video is kind of a property of or a function of the overall list

36
00:02:14,030 --> 00:02:14,600
of videos.

37
00:02:15,200 --> 00:02:20,810
If we were working with Redux, we would technically say that the selection piece of state is derived

38
00:02:20,870 --> 00:02:22,910
off of the overall list of videos.

39
00:02:23,660 --> 00:02:27,110
So even though, yes, we can't have a kirtley such a video if we don't fetch them.

40
00:02:27,530 --> 00:02:32,510
Well, nonetheless, election is not really so much about fetching videos as it is about picking one

41
00:02:32,510 --> 00:02:34,910
of the currently batch videos.

42
00:02:36,060 --> 00:02:41,760
Now, if all that doesn't make sense, again, this is where I say that all this hook stuff is kind

43
00:02:41,760 --> 00:02:42,690
of an art form.

44
00:02:42,900 --> 00:02:44,040
So if it doesn't make sense right now.

45
00:02:44,100 --> 00:02:44,580
Don't sweat it.

46
00:02:44,730 --> 00:02:46,050
Let's just continue on for a moment.

47
00:02:47,510 --> 00:02:51,950
Now, our next big block of code is the requests that we make inside of on term summit.

48
00:02:52,390 --> 00:02:57,410
So we make the request and we then take some data out that response and use it to update our video piece

49
00:02:57,410 --> 00:02:57,860
of state.

50
00:02:58,190 --> 00:03:03,170
So, again, I'm going to claim that all this stuff right here is about our videos Piece of State.

51
00:03:04,070 --> 00:03:07,880
And it's only this very last line right here that is isn't at all about selection.

52
00:03:08,150 --> 00:03:11,900
Now, again, you might say to me again, Stephen, we can't have a currently second video if we don't

53
00:03:11,900 --> 00:03:12,920
fetch the list of videos.

54
00:03:13,160 --> 00:03:15,710
But really, again, take a look at that line of code right there.

55
00:03:16,430 --> 00:03:21,290
Some selected video doesn't really care so much about the response data as it does about the overall

56
00:03:21,290 --> 00:03:22,190
list of videos.

57
00:03:22,640 --> 00:03:28,790
So we would again say that selection is really kind of a derived property of the overall list of videos.

58
00:03:30,630 --> 00:03:31,830
Again, it does make sense.

59
00:03:31,890 --> 00:03:32,340
Don't sweat it.

60
00:03:33,330 --> 00:03:37,680
All right, so we've now gone through and we've taken a look at just about every block of code and we've

61
00:03:37,680 --> 00:03:39,840
more or less assigned a purpose to each one.

62
00:03:40,900 --> 00:03:41,800
Now that we've done that.

63
00:03:43,050 --> 00:03:48,150
We're going to start to identify the inputs to that code and the outputs to that code and by inputs

64
00:03:48,150 --> 00:03:48,570
and outputs.

65
00:03:48,630 --> 00:03:53,430
I mean, out of just the videos related code, let's ignore selection for right now.

66
00:03:53,670 --> 00:03:58,620
Let's just think about the lines of code related to videos of each of those lines of code.

67
00:03:58,860 --> 00:04:01,980
What are the arguments to those pieces of code?

68
00:04:02,460 --> 00:04:05,760
What are the outside inputs that are required to make that code run?

69
00:04:06,480 --> 00:04:12,480
Well, in this case, kind of hard to identify, but it really has one single inputs, and that is the

70
00:04:12,480 --> 00:04:13,560
default search term.

71
00:04:14,370 --> 00:04:19,950
This is the only thing that is kind of required from the outside as input to this code to make it run

72
00:04:19,950 --> 00:04:20,460
correctly.

73
00:04:21,120 --> 00:04:23,220
If we provide a default search term.

74
00:04:23,610 --> 00:04:27,510
Everything else inside of here is going to more or less work as expected.

75
00:04:28,080 --> 00:04:33,210
So in this case, you would say that this default search term is really the only input to this block

76
00:04:33,210 --> 00:04:33,660
of code.

77
00:04:35,680 --> 00:04:40,740
The next, we are going to identify the outputs and by output's, we mean to say out of the videos related

78
00:04:40,740 --> 00:04:41,160
code.

79
00:04:41,460 --> 00:04:42,720
What do you and I get back?

80
00:04:43,080 --> 00:04:48,750
What do you and I as developers somehow take from this code and make use of inside the jail X of our

81
00:04:48,750 --> 00:04:50,400
application or inside this component?

82
00:04:51,210 --> 00:04:56,330
Well, in that we really have two outputs, the outputs from all the videos related.

83
00:04:56,370 --> 00:05:01,050
Code is just the video's array itself and the on term simit function.

84
00:05:01,440 --> 00:05:06,690
Those are the only variables inside of all this stuff that we make use of anywhere else inside of our

85
00:05:06,690 --> 00:05:07,260
component.

86
00:05:08,160 --> 00:05:11,400
We've now identified the input and the output to our hook.

87
00:05:12,680 --> 00:05:14,070
It's now the last step we're gonna go through.

88
00:05:14,100 --> 00:05:15,300
Besides, obviously.

89
00:05:16,390 --> 00:05:17,860
Trying to extract all that code.

90
00:05:18,340 --> 00:05:22,540
We want to try to take those inputs and outputs and insert them into a sentence.

91
00:05:22,630 --> 00:05:26,860
And I want you to remember the sentence in the back of your head or whenever you start to put together

92
00:05:26,890 --> 00:05:28,460
your own custom hooks.

93
00:05:29,320 --> 00:05:30,130
Here's the sentence.

94
00:05:30,700 --> 00:05:36,940
If you give me a list of inputs, I will give you a list of outputs and you want to be build to take

95
00:05:36,970 --> 00:05:39,310
all the inputs and outputs you have identified and have.

96
00:05:39,310 --> 00:05:41,140
The overall sentence makes sense.

97
00:05:41,950 --> 00:05:48,130
So in our case, our input is a default search term and our outputs are a function to use to search

98
00:05:48,130 --> 00:05:50,260
for videos and a list of videos.

99
00:05:50,890 --> 00:05:54,850
Overall, we would read this as if you give me in this case me is the custom hook.

100
00:05:55,240 --> 00:06:01,060
If you give me a default search term, I will give you the developer a way to search for videos and

101
00:06:01,060 --> 00:06:01,930
a list of videos.

102
00:06:03,610 --> 00:06:07,210
I think that pretty well identifies this entire block of code right here.

103
00:06:07,780 --> 00:06:13,420
If we give this block of code a default search term, it's going to give back to you and I, the developers,

104
00:06:13,770 --> 00:06:18,520
a way to search for videos and a list of videos that we have already fetch.

105
00:06:20,220 --> 00:06:23,570
All right, so well, last time I know said this probably about five times inside this video now.

106
00:06:23,680 --> 00:06:24,870
This stuff doesn't make sense.

107
00:06:24,900 --> 00:06:25,740
Don't sweat it.

108
00:06:26,040 --> 00:06:27,720
You've got to see this for yourself.

109
00:06:27,780 --> 00:06:30,370
Five or six times before it's really going to make sense.

110
00:06:30,370 --> 00:06:32,310
And you're going to go to write a custom hook on your own.

111
00:06:33,000 --> 00:06:34,200
Let's take one more pause here.

112
00:06:34,370 --> 00:06:37,800
And then in the next video, we're going to start to build out our own custom hook.