Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,220 --> 00:00:04,530
Here is an example application,
2
00:00:04,530 --> 00:00:06,640
of course you find it attached.
3
00:00:06,640 --> 00:00:09,180
And as you see, this application has in the end
4
00:00:09,180 --> 00:00:13,520
just two counters, one counter counting upwards,
5
00:00:13,520 --> 00:00:16,410
one counter counting backwards
6
00:00:16,410 --> 00:00:19,410
and of course that's not a fancy application.
7
00:00:19,410 --> 00:00:23,170
We're going to see another example later in this module
8
00:00:23,170 --> 00:00:28,090
but this application allows me to explore custom hooks
9
00:00:28,090 --> 00:00:30,080
together with you, show you
10
00:00:30,080 --> 00:00:32,479
why we might wanna build custom hooks
11
00:00:32,479 --> 00:00:34,743
and how we built custom hooks.
12
00:00:35,730 --> 00:00:38,190
So here's the code for it is application,
13
00:00:38,190 --> 00:00:40,250
which again, you'll find attached
14
00:00:40,250 --> 00:00:44,180
and in here, we in the end just got free components,
15
00:00:44,180 --> 00:00:47,390
the backward counter and the forwards counter,
16
00:00:47,390 --> 00:00:50,910
the card component which is just a rapper component
17
00:00:50,910 --> 00:00:53,880
providing some styling and then app JS,
18
00:00:53,880 --> 00:00:55,870
I'm using the forward and the backward
19
00:00:55,870 --> 00:00:58,930
counter components and these components
20
00:00:58,930 --> 00:01:01,380
do just what their name implies.
21
00:01:01,380 --> 00:01:05,150
The forward counter uses, useState and useEffect
22
00:01:05,150 --> 00:01:08,770
to manage a state and to create an interval
23
00:01:08,770 --> 00:01:11,000
which simply starts counting up
24
00:01:11,000 --> 00:01:16,000
and which then sets a new counter state every second,
25
00:01:16,260 --> 00:01:18,260
every 1000 milliseconds.
26
00:01:18,260 --> 00:01:22,050
And in the backward counter, I'm doing the exact same thing
27
00:01:22,050 --> 00:01:25,660
but here I'm subtracting from the counter
28
00:01:25,660 --> 00:01:29,550
but other than that, it's the same logic.
29
00:01:29,550 --> 00:01:31,990
So, therefore it is fair to say
30
00:01:31,990 --> 00:01:36,090
that these two components are fairly similar.
31
00:01:36,090 --> 00:01:39,800
Now, of course, we might be able to create one component
32
00:01:39,800 --> 00:01:44,180
in state and then use props to configure it differently
33
00:01:44,180 --> 00:01:48,530
but it would also be realistic that in real applications
34
00:01:48,530 --> 00:01:52,860
you have different components, which to a certain extent
35
00:01:52,860 --> 00:01:55,660
might do related tasks.
36
00:01:55,660 --> 00:01:58,640
And it is fair to say that we therefore definitely
37
00:01:58,640 --> 00:02:02,570
have some code duplication in the forward
38
00:02:02,570 --> 00:02:04,253
and the back counter.
39
00:02:05,780 --> 00:02:10,500
If we leave that small detail of subtracting or adding
40
00:02:10,500 --> 00:02:14,810
to the counter aside, it's exactly the same code in the end.
41
00:02:14,810 --> 00:02:18,540
And whenever you have code duplication in programming,
42
00:02:18,540 --> 00:02:22,570
you typically wanna take that code and refactor it
43
00:02:22,570 --> 00:02:26,560
and create a function which holds the shared code.
44
00:02:26,560 --> 00:02:30,130
And that's exactly what we're going to do with custom hooks
45
00:02:30,130 --> 00:02:32,580
because the problem we face here
46
00:02:32,580 --> 00:02:35,810
is that the code which we want to reuse
47
00:02:35,810 --> 00:02:38,720
uses react hook like useState
48
00:02:38,720 --> 00:02:41,590
and useEffect, and it updates the state
49
00:02:41,590 --> 00:02:44,230
by calling the state updating function
50
00:02:44,230 --> 00:02:47,250
and as you learned with the rules of hooks,
51
00:02:47,250 --> 00:02:50,750
you are not allowed to use these react hooks
52
00:02:50,750 --> 00:02:53,070
in any random function.
53
00:02:53,070 --> 00:02:56,560
You must only use them in react component functions
54
00:02:56,560 --> 00:02:58,560
or custom hooks.
55
00:02:58,560 --> 00:03:00,890
So, if we wanna outsource that logic
56
00:03:00,890 --> 00:03:02,580
into a separate function,
57
00:03:02,580 --> 00:03:05,040
we need to build such a custom hook
58
00:03:05,040 --> 00:03:08,020
and that's exactly what we're going to do here.
59
00:03:08,020 --> 00:03:10,950
So how do we build a custom hook then?
60
00:03:10,950 --> 00:03:13,570
Well, typically just as with components,
61
00:03:13,570 --> 00:03:16,820
we store every hook in a standalone file.
62
00:03:16,820 --> 00:03:19,980
So I will start by creating a new hooks folder
63
00:03:19,980 --> 00:03:22,690
side-by-side to the components folder
64
00:03:22,690 --> 00:03:27,690
and in there, I will add the use-dash counter js file.
65
00:03:28,860 --> 00:03:32,190
Now, the file name is totally up to you.
66
00:03:32,190 --> 00:03:35,350
You don't have to name it, use counter.
67
00:03:35,350 --> 00:03:37,430
I do name it like this though
68
00:03:37,430 --> 00:03:40,240
because there is a clear rule
69
00:03:40,240 --> 00:03:41,980
which we have to follow
70
00:03:41,980 --> 00:03:44,070
when it comes to the function name
71
00:03:44,070 --> 00:03:46,080
inside of that file
72
00:03:46,080 --> 00:03:48,800
because we are going to create a function here,
73
00:03:48,800 --> 00:03:51,258
either as a concept, which stores a function
74
00:03:51,258 --> 00:03:54,040
or with the function keyword
75
00:03:54,040 --> 00:03:57,510
I'll go for the constant approach, but both would work
76
00:03:57,510 --> 00:04:00,000
and that function which you do create
77
00:04:00,000 --> 00:04:03,840
has to start with a use in its name.
78
00:04:03,840 --> 00:04:06,260
That is a must do.
79
00:04:06,260 --> 00:04:10,170
That is a hard rule which you have to follow.
80
00:04:10,170 --> 00:04:13,030
It will be a normal function in the end
81
00:04:13,030 --> 00:04:14,980
but the use at their beginning
82
00:04:14,980 --> 00:04:19,430
signals to react that it will be a custom hook
83
00:04:19,430 --> 00:04:21,820
and it gives the reacts to guarantee
84
00:04:21,820 --> 00:04:25,610
that you will use stat function by respecting
85
00:04:25,610 --> 00:04:28,180
these rules of hooks so that you will use
86
00:04:28,180 --> 00:04:31,550
this custom hook function just as you use to build in hooks.
87
00:04:31,550 --> 00:04:34,010
And that is a guarantee react needs
88
00:04:34,010 --> 00:04:36,960
because otherwise if you start using react hooks
89
00:04:36,960 --> 00:04:40,110
in your custom hook and you would use your custom hook
90
00:04:40,110 --> 00:04:42,740
in a wrong, in a forbidden place,
91
00:04:42,740 --> 00:04:45,410
you would implicitly also use to build in hooks
92
00:04:45,410 --> 00:04:47,170
in a wrong place.
93
00:04:47,170 --> 00:04:49,340
And that's why we started with us here
94
00:04:49,340 --> 00:04:51,310
because react can look out for that
95
00:04:51,310 --> 00:04:54,400
and actually this project set up will give you a warning
96
00:04:54,400 --> 00:04:57,060
if you have a function starting with use
97
00:04:57,060 --> 00:05:01,430
and you then start violating some of these rules of hooks.
98
00:05:01,430 --> 00:05:03,270
That's why this is a must do.
99
00:05:03,270 --> 00:05:07,330
Start with use is in the functioning name and thereafter
100
00:05:07,330 --> 00:05:09,140
you can name it however you want,
101
00:05:09,140 --> 00:05:10,910
I will name it, usecounter
102
00:05:10,910 --> 00:05:14,050
and then store a regular function in it,
103
00:05:14,050 --> 00:05:15,740
and because of that function name,
104
00:05:15,740 --> 00:05:18,150
I also named the file like this,
105
00:05:18,150 --> 00:05:21,410
but again for the file name, there is no specific rule,
106
00:05:21,410 --> 00:05:23,313
you could name it however you want.
107
00:05:24,170 --> 00:05:28,320
Now of course, ultimately the goal is to use this function
108
00:05:28,320 --> 00:05:31,740
in another file, so therefore I will export
109
00:05:32,700 --> 00:05:37,700
this function here and then inside of this function,
110
00:05:38,860 --> 00:05:43,610
we can start adding that logic which we want to reuse
111
00:05:43,610 --> 00:05:47,490
and in our case, if we started with the forward counter,
112
00:05:47,490 --> 00:05:51,050
in the end we can just copy that code here
113
00:05:51,050 --> 00:05:54,570
from the forward counter that code, where we use
114
00:05:54,570 --> 00:05:58,100
use state and use effect, not the code
115
00:05:58,100 --> 00:06:02,060
where we return JSX, just the Abra code.
116
00:06:02,060 --> 00:06:06,773
Copy that and add it inside of that used counter function.
117
00:06:07,830 --> 00:06:12,720
Now, since we are using useState and useEffect now,
118
00:06:12,720 --> 00:06:15,710
we need to import these things from react
119
00:06:15,710 --> 00:06:18,570
because you always need to import what you use.
120
00:06:18,570 --> 00:06:22,763
So here we imported useState and useEffect like this.
121
00:06:24,020 --> 00:06:27,930
Now we got this logic in this custom hook function
122
00:06:27,930 --> 00:06:31,610
but of course in the end, we still wanna utilize it
123
00:06:31,610 --> 00:06:33,320
in our forward counter
124
00:06:33,320 --> 00:06:36,160
and later also in the backward counter.
125
00:06:36,160 --> 00:06:37,293
How can we do that?
10033
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.