Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,250 --> 00:00:05,530
Well, you are going to use a custom hook
2
00:00:05,530 --> 00:00:07,580
just as you use to build in hooks.
3
00:00:07,580 --> 00:00:09,340
You are just calling it
4
00:00:09,340 --> 00:00:13,170
like a function because it is just a function.
5
00:00:13,170 --> 00:00:17,170
So therefore we wanna import use counter here
6
00:00:17,170 --> 00:00:20,780
in the forward counter component, import use counter
7
00:00:20,780 --> 00:00:25,200
from going up one level diving into the hooks folder
8
00:00:25,200 --> 00:00:26,263
use counter.
9
00:00:27,190 --> 00:00:29,350
And in the forward counter
10
00:00:29,350 --> 00:00:31,993
we can then just call use counter.
11
00:00:33,040 --> 00:00:36,110
Now that alone will not do everything we need to do
12
00:00:36,110 --> 00:00:37,440
but it is a start.
13
00:00:37,440 --> 00:00:41,210
Now we are calling this custom hook function.
14
00:00:41,210 --> 00:00:42,840
So when this gets called,
15
00:00:42,840 --> 00:00:45,910
obviously, all that code will execute.
16
00:00:45,910 --> 00:00:47,950
So that state will be registered
17
00:00:47,950 --> 00:00:49,893
and that effect will be fired.
18
00:00:50,890 --> 00:00:54,310
Now, if you call a custom hook in one of your components
19
00:00:54,310 --> 00:00:58,110
and that component, for example of registers a state
20
00:00:58,110 --> 00:01:03,110
or an effect as we do it here then this state and effect
21
00:01:03,870 --> 00:01:06,290
will be tied to the component
22
00:01:06,290 --> 00:01:08,880
in which you use your custom hook.
23
00:01:08,880 --> 00:01:12,720
So if I call use counter in the forward counter component
24
00:01:12,720 --> 00:01:16,320
the state created here, in use counter
25
00:01:16,320 --> 00:01:19,600
will be tied to this forward counter.
26
00:01:19,600 --> 00:01:22,820
If we use a custom hook in multiple components
27
00:01:22,820 --> 00:01:25,700
every component will receive its own state.
28
00:01:25,700 --> 00:01:29,330
So just because we use a custom hook does not mean
29
00:01:29,330 --> 00:01:32,970
that we share state or effects across components.
30
00:01:32,970 --> 00:01:34,710
Instead for every component
31
00:01:34,710 --> 00:01:36,910
the custom hook is executed again.
32
00:01:36,910 --> 00:01:40,840
And every component instance then receives its own state.
33
00:01:40,840 --> 00:01:43,390
So it's just a logic which has shared
34
00:01:43,390 --> 00:01:45,193
not the concrete state.
35
00:01:46,170 --> 00:01:48,860
So therefore, in this case, since I call use counter
36
00:01:48,860 --> 00:01:53,320
in the forward counter, this state is set up
37
00:01:53,320 --> 00:01:57,650
for the forward counter and the this effect is set up
38
00:01:57,650 --> 00:02:00,603
and fired for the forward counter component.
39
00:02:01,870 --> 00:02:05,100
But of course now inside of the forward counter
40
00:02:05,100 --> 00:02:09,070
I need access to the counter state, which is managed
41
00:02:09,070 --> 00:02:12,180
by the custom hook, because I wanna output it here.
42
00:02:12,180 --> 00:02:14,210
And how can we do that?
43
00:02:14,210 --> 00:02:15,713
How can we make that happen?
44
00:02:16,990 --> 00:02:20,510
Well, just as we do it with the built in hooks.
45
00:02:20,510 --> 00:02:24,610
For use state this built in react hook
46
00:02:24,610 --> 00:02:27,810
this also does something behind the scenes
47
00:02:27,810 --> 00:02:30,630
and it also creates and manage this state.
48
00:02:30,630 --> 00:02:33,160
And then it does one important thing.
49
00:02:33,160 --> 00:02:37,490
It returns an array, which we are de-structuring here.
50
00:02:37,490 --> 00:02:41,060
Custom hooks are just functions and they afford
51
00:02:41,060 --> 00:02:43,300
they can return things.
52
00:02:43,300 --> 00:02:46,100
So here in the case of use counter to make
53
00:02:46,100 --> 00:02:50,400
that counter state available in the components that do use
54
00:02:50,400 --> 00:02:53,640
this custom hook, we can simply return it.
55
00:02:53,640 --> 00:02:55,713
We can simply return counter.
56
00:02:56,820 --> 00:02:59,880
You can return whatever you wanna return
57
00:02:59,880 --> 00:03:01,340
in your custom hooks.
58
00:03:01,340 --> 00:03:06,220
That could be an array or an object or a number
59
00:03:06,220 --> 00:03:09,550
or in this case implicitly a number
60
00:03:09,550 --> 00:03:11,803
because counter will hold a number.
61
00:03:12,760 --> 00:03:15,700
So now I'm returning this counter state here.
62
00:03:15,700 --> 00:03:19,440
So this state, which is managed or which is set up by
63
00:03:19,440 --> 00:03:22,020
that custom hook, I'm returning it here.
64
00:03:22,020 --> 00:03:25,180
And therefore, in the forward counter component
65
00:03:25,180 --> 00:03:27,240
where I call use counter
66
00:03:27,240 --> 00:03:30,580
I can of course use that returned value.
67
00:03:30,580 --> 00:03:33,360
And here I can set up my counter constant
68
00:03:33,360 --> 00:03:35,960
set it equal to calling used counter
69
00:03:35,960 --> 00:03:38,550
since use counter returns to counter.
70
00:03:38,550 --> 00:03:41,313
I can store it in a constant of this component.
71
00:03:42,300 --> 00:03:46,440
And now we can get rid of all that old code in here
72
00:03:46,440 --> 00:03:49,540
and slim down this component, like this, get rid
73
00:03:49,540 --> 00:03:53,370
of the imports because we're not directly using use state
74
00:03:53,370 --> 00:03:56,620
or a use effect in this file anymore.
75
00:03:56,620 --> 00:03:59,770
And now we got this slim component.
76
00:03:59,770 --> 00:04:03,730
And if we now save that, you will see
77
00:04:03,730 --> 00:04:08,010
that if I reload here, this counter this forward counter
78
00:04:08,010 --> 00:04:12,560
still works as before, but now with a custom hook.
79
00:04:12,560 --> 00:04:17,490
And that is how we build custom hooks and why we do it.
80
00:04:17,490 --> 00:04:20,930
And when it comes to the how, the most important thing
81
00:04:20,930 --> 00:04:25,930
really is just the naming, you have to start with use
82
00:04:25,930 --> 00:04:29,070
and then you can use stateful logic in there.
83
00:04:29,070 --> 00:04:31,460
You can use upper react hooks in there
84
00:04:31,460 --> 00:04:36,190
and that allows you to share this logic across components.
85
00:04:36,190 --> 00:04:38,760
And speaking off that, let's now make sure
86
00:04:38,760 --> 00:04:41,110
that we can use this custom hook
87
00:04:41,110 --> 00:04:43,333
also in the backward counter component.
6982
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.