1
00:00:01,340 --> 00:00:05,720
In this video, we're going to start to take a look at extracting some more logic out of our app component.

2
00:00:05,990 --> 00:00:07,620
First off, a couple of quick diagrams.

3
00:00:08,310 --> 00:00:08,460
OK.

4
00:00:08,630 --> 00:00:12,770
So I want you to imagine a little scenario very quickly right now inside of our app component.

5
00:00:12,830 --> 00:00:18,290
We've got some logic around fetching some list of videos that's really around this video's piece of

6
00:00:18,290 --> 00:00:23,570
states, around putting together this use effect function, because that's going to cause us to search

7
00:00:23,570 --> 00:00:24,980
for some initial list of videos.

8
00:00:25,400 --> 00:00:30,020
And then on turn submit where we are actually making the request and then updating our videos piece

9
00:00:30,020 --> 00:00:30,500
of state.

10
00:00:31,430 --> 00:00:33,920
That is all currently contained inside of our app component.

11
00:00:34,520 --> 00:00:39,590
Let's imagine for a second that we are working on a very large application, maybe something like YouTube

12
00:00:39,650 --> 00:00:40,250
itself.

13
00:00:41,190 --> 00:00:46,920
Maybe at some point in time we decide to create another component called analytics, and maybe this

14
00:00:46,920 --> 00:00:51,480
analytics component is going to show our users some analytics about all the different videos that they

15
00:00:51,480 --> 00:00:52,050
have posted.

16
00:00:53,610 --> 00:00:58,490
So inside this component's, chances are we are going to need to somehow fetch a list of videos that

17
00:00:58,490 --> 00:00:59,570
this user has made.

18
00:01:00,260 --> 00:01:06,650
So we might end up deciding to just duplicate or copy paste all of that video fetching logic from the

19
00:01:06,650 --> 00:01:08,720
app component over to analytics.

20
00:01:09,260 --> 00:01:13,820
Now, of course, there might be some very small, subtle differences in the video fetching logic between

21
00:01:13,820 --> 00:01:14,630
these two components.

22
00:01:14,910 --> 00:01:19,490
Right now, let's just assume that the code is more or less identical in nature.

23
00:01:20,630 --> 00:01:26,130
Naturally, any time we've got some identical code shared between two different locations inside of

24
00:01:26,130 --> 00:01:31,440
a project, that is usually a sign that we want to extract that code and make it a little bit more reusable

25
00:01:31,470 --> 00:01:32,010
in nature.

26
00:01:32,870 --> 00:01:33,970
So how would we do that?

27
00:01:34,570 --> 00:01:40,660
Well, to make reusable code when we are making use of function components and hooks, we create custom

28
00:01:40,780 --> 00:01:41,290
hooks.

29
00:01:42,730 --> 00:01:46,640
So here's what we would do, rather than duplicating that code in two locations.

30
00:01:46,790 --> 00:01:49,040
We would instead create a custom hook.

31
00:01:49,790 --> 00:01:54,630
This is essentially a function that is going to have a couple of references to maybe use state use effect.

32
00:01:54,890 --> 00:01:56,420
Some other stuff like that inside of it.

33
00:01:57,380 --> 00:02:02,800
Then our app component and the analytics component can make use of this custom hook, you fetch a list

34
00:02:02,810 --> 00:02:06,950
of videos as opposed to duplicating all that logic between the two.

35
00:02:08,680 --> 00:02:10,150
That's what we're going to try to do next.

36
00:02:10,510 --> 00:02:13,870
We're going to try to create a custom hook and inside of that custom hook.

37
00:02:13,900 --> 00:02:16,900
We're going to have some logic around fetching a list of videos.

38
00:02:17,800 --> 00:02:22,510
Let me show you first a couple of different notes just to help you get an overview of custom hooks in

39
00:02:22,510 --> 00:02:23,560
what they are all about.

40
00:02:24,730 --> 00:02:30,640
All right, so first off, reading SDM Hooks is one of the best ways to write reusable code inside of

41
00:02:30,640 --> 00:02:34,300
a REAC project, besides, of course, creating components.

42
00:02:34,910 --> 00:02:40,270
So usually we make use of custom hooks any time we want to make some calls to say use state or use effect,

43
00:02:40,510 --> 00:02:42,250
a little bit more reusable in nature.

44
00:02:43,150 --> 00:02:49,090
We are always going to create custom hooks by extracting some hook related code out of an existing function

45
00:02:49,090 --> 00:02:49,690
component.

46
00:02:50,730 --> 00:02:55,080
The first thing I want you to understand around these custom books is that we're really talking about

47
00:02:55,080 --> 00:02:58,980
making all of this code right here reuseable in nature.

48
00:02:59,490 --> 00:03:04,350
We are usually with a custom hook, not talking about anything related to J.S. X.

49
00:03:05,260 --> 00:03:09,420
So whenever you start building custom Hoke's, you're not really focused on somehow making this stuff

50
00:03:09,420 --> 00:03:12,490
for usable to make J.S. X reusable in any way.

51
00:03:12,550 --> 00:03:14,290
We always create another component.

52
00:03:15,250 --> 00:03:20,350
In order to make all of this stuff at the top of a component, so all of this data related stuff right

53
00:03:20,350 --> 00:03:22,630
here reuseable, we make a custom hook.

54
00:03:24,560 --> 00:03:29,530
So with that in mind, custom hooks are always going to contain at least one primitive book.

55
00:03:29,960 --> 00:03:34,700
So a hook like you states or use effect when we use the term custom hook.

56
00:03:34,940 --> 00:03:37,430
We're not talking about building up a primitive hook.

57
00:03:37,490 --> 00:03:40,550
We're not building something like use state or use effect from scratch.

58
00:03:40,940 --> 00:03:46,790
Instead, we're just talking about taking some existing code that is making use of use states or use

59
00:03:46,790 --> 00:03:49,070
effect and putting it into a reusable function.

60
00:03:49,610 --> 00:03:54,240
So even the term custom hook is a little bit misleading because it might make you think we are going

61
00:03:54,240 --> 00:03:56,420
to build something like you state or use effect.

62
00:03:56,510 --> 00:03:57,890
Again, that's not the case.

63
00:03:59,580 --> 00:04:03,510
Each custom hook we put together is always going to have one single purpose.

64
00:04:04,000 --> 00:04:07,050
So thinking back to this real quick example I gave you right here.

65
00:04:07,470 --> 00:04:13,260
If we had a custom hook that had some logic inside of it around fetching videos and some logic inside

66
00:04:13,260 --> 00:04:14,550
of it, around selecting.

67
00:04:15,540 --> 00:04:16,090
A video?

68
00:04:16,510 --> 00:04:18,220
Well, this might not be as useful.

69
00:04:18,820 --> 00:04:23,050
Our app component does need to have logic around both fetching videos and selecting a video.

70
00:04:23,260 --> 00:04:26,740
But maybe our analytics one doesn't need anything around selecting video.

71
00:04:27,280 --> 00:04:29,980
Maybe analytics just needs the video fetching logic.

72
00:04:30,560 --> 00:04:31,780
Don't ever build a custom hook.

73
00:04:31,810 --> 00:04:37,090
We try to have just one goal, one purpose, or work with one kind of resource inside of it.

74
00:04:37,570 --> 00:04:41,920
So we would have just some code around video fetching and not code around selecting a video.

75
00:04:44,230 --> 00:04:45,340
Now, some bad news here.

76
00:04:45,450 --> 00:04:48,930
Unfortunately, building custom hooks is kind of an art form.

77
00:04:49,290 --> 00:04:54,510
It is very challenging for me to give you some foolproof list of steps you can follow and always build

78
00:04:54,540 --> 00:04:55,740
a perfect custom hook.

79
00:04:56,130 --> 00:04:58,710
This is one of those things where you just have to kind of get your feet wet.

80
00:04:58,950 --> 00:05:02,340
You have to write your own code a little bit before you're going to really understand the stuff.

81
00:05:03,060 --> 00:05:05,820
Nonetheless, I did put together a series of steps for you to follow.

82
00:05:05,880 --> 00:05:10,410
So we're going to try to make this as a foolproof process as possible.

83
00:05:10,440 --> 00:05:13,680
But again, it's something you really just have to practice on your own.

84
00:05:14,420 --> 00:05:19,290
And with that mind, one thing I will say is that anytime you have data fetching code, that is usually

85
00:05:19,350 --> 00:05:23,080
a great kind of thing to try to make into a custom book.

86
00:05:23,280 --> 00:05:24,330
And that's really what we're doing here.

87
00:05:24,330 --> 00:05:30,180
We are talking about somehow making this video fetching code a little bit more usable in nature by extracting

88
00:05:30,180 --> 00:05:31,200
it into a custom hook.

89
00:05:31,350 --> 00:05:32,640
So just something to keep in mind.

90
00:05:33,790 --> 00:05:35,470
All right, so now we've got some notes either way.

91
00:05:35,920 --> 00:05:40,600
One quick pause and we're going to go through a general process for creating reusable hooks in just

92
00:05:40,600 --> 00:05:40,900
a moment.