Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,530 --> 00:00:08,320
Now, I know that especially does custom hook thing can be confusing also because we built a quite complex
2
00:00:08,320 --> 00:00:11,410
custom, OK, here, you can definitely have simpler ones than this one.
3
00:00:11,410 --> 00:00:13,720
But I want to show one where you can learn a lot.
4
00:00:14,290 --> 00:00:18,260
The idea of custom hooks is that you share logic, not data.
5
00:00:18,820 --> 00:00:24,460
So what we do here is we share logic that we use in both to search animals in the ingredients component.
6
00:00:24,640 --> 00:00:29,830
And when we send the request in ingredients, this doesn't do anything and search and the other way
7
00:00:29,830 --> 00:00:30,510
around as well.
8
00:00:30,520 --> 00:00:31,560
This is how it should be.
9
00:00:31,930 --> 00:00:37,590
You're able to share stateful logic across components and it is stateful because are a custom hook.
10
00:00:37,600 --> 00:00:40,360
We're using use reducer to manage some state.
11
00:00:40,630 --> 00:00:47,050
And when we dispatch a new action here, does actually triggers react to rebuild the component, but
12
00:00:47,050 --> 00:00:47,770
we use the hook.
13
00:00:47,890 --> 00:00:54,370
So we're not having a regular JavaScript function here, but a function where we can do certain things
14
00:00:54,370 --> 00:01:01,360
that will lead react to rebuild the component in which we're using this function, this hook.
15
00:01:01,660 --> 00:01:03,100
That's the ideal hooks.
16
00:01:03,490 --> 00:01:09,010
And while custom hooks can be confusing at first, they can be very powerful because we were able to
17
00:01:09,010 --> 00:01:12,700
move all of that age to the P logic out of this component.
18
00:01:13,090 --> 00:01:18,190
And instead we just send off some requests and we handle the responses and use effect.
19
00:01:18,190 --> 00:01:21,010
And that, of course, all does a pattern you have to get used to.
20
00:01:21,280 --> 00:01:27,670
Normally you would expect send request to return a promise and then use then or async a way to handle
21
00:01:27,670 --> 00:01:27,940
this.
22
00:01:28,270 --> 00:01:33,790
And you could do it as by the way, you could absolutely have send request, return a promise here.
23
00:01:33,790 --> 00:01:35,110
It's not for turning anything.
24
00:01:35,320 --> 00:01:40,900
While we could, of course, return the result of fetch and now send request would all of a sudden return
25
00:01:40,900 --> 00:01:41,530
a promise.
26
00:01:42,500 --> 00:01:46,320
You could do that and you would be able to implement this in a totally different way.
27
00:01:46,640 --> 00:01:50,990
You would be able to simply listen to the response here.
28
00:01:52,120 --> 00:01:59,320
And handle the response here instead of using it or doing it and use effect this split into a place
29
00:01:59,320 --> 00:02:04,210
where you send it and then use a fact where you handle it can be especially confusing at first.
30
00:02:04,210 --> 00:02:11,020
But this actually embraces hooks and uses their full potential because I believe it's a very clean code
31
00:02:11,020 --> 00:02:18,340
in the end, where we have a clearly defined place, where we change some data in our component here.
32
00:02:18,340 --> 00:02:22,330
And we could have multiple use effect called, of course, if we have multiple side effects.
33
00:02:22,630 --> 00:02:29,080
So we have a clearly defined place where we do that and we have another place where we dispatch our
34
00:02:29,080 --> 00:02:31,560
actions, so to say where we send our requests.
35
00:02:32,440 --> 00:02:35,740
Again, it is something that certainly takes time getting used to.
36
00:02:35,740 --> 00:02:37,120
It's not a must do.
37
00:02:37,120 --> 00:02:40,600
You could return a promise and use your regular flow.
38
00:02:41,020 --> 00:02:44,410
But I think this split is very nice, very clean.
39
00:02:44,680 --> 00:02:50,420
And most importantly, does overall use of a custom hook and of hooks in general allows us to write
40
00:02:50,420 --> 00:02:56,920
a very clean code with clear responsibilities, which can be challenging at first, but which ultimately
41
00:02:56,920 --> 00:03:02,650
will allow you to write better, cleaner and probably also better performing applications.
4487
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.