Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,350 --> 00:00:04,490
So we should add fetchTasks
2
00:00:04,490 --> 00:00:07,090
as a dependency here to useEffect
3
00:00:07,090 --> 00:00:09,200
because you'll learn that basically
4
00:00:09,200 --> 00:00:11,540
every piece of data or function,
5
00:00:11,540 --> 00:00:14,420
which is set up inside of a component function,
6
00:00:14,420 --> 00:00:16,600
which you are using in useEffect
7
00:00:16,600 --> 00:00:18,393
should be added as a dependency.
8
00:00:19,550 --> 00:00:21,170
The problem with that
9
00:00:21,170 --> 00:00:23,930
and therefore you shouldn't save this file yet,
10
00:00:23,930 --> 00:00:26,730
is that this would create an infinite look.
11
00:00:26,730 --> 00:00:30,110
Why? Because we will call fetch tasks here
12
00:00:30,110 --> 00:00:31,710
and this will then go ahead
13
00:00:31,710 --> 00:00:35,420
and execute this send request function in the custom hook,
14
00:00:35,420 --> 00:00:38,350
and that will then set some states.
15
00:00:38,350 --> 00:00:40,250
When the states are set
16
00:00:40,250 --> 00:00:43,300
the component where we use the custom hook
17
00:00:43,300 --> 00:00:46,820
will be re-rendered because I explained
18
00:00:46,820 --> 00:00:50,069
that when you use a custom hook, which uses state
19
00:00:50,069 --> 00:00:51,950
and you use that hook in that component
20
00:00:51,950 --> 00:00:54,810
that component will implicitly use that state
21
00:00:54,810 --> 00:00:56,810
set up in the custom hook.
22
00:00:56,810 --> 00:00:59,380
So the state configured in the custom hook
23
00:00:59,380 --> 00:01:03,670
is attached to the component where you use the custom hook.
24
00:01:03,670 --> 00:01:06,920
So if we call set is loading and set error here
25
00:01:06,920 --> 00:01:09,890
in the send request function in the custom hook
26
00:01:09,890 --> 00:01:14,040
this will trigger the app component to be re-evaluated
27
00:01:14,040 --> 00:01:18,113
because I'm using that custom hook here in that component.
28
00:01:19,270 --> 00:01:23,490
Now, dad, however, will then call the custom hook again
29
00:01:23,490 --> 00:01:25,690
when that component is re-evaluated
30
00:01:25,690 --> 00:01:28,390
and when that custom hook is called again,
31
00:01:28,390 --> 00:01:32,790
I am indeed recreating the send request function
32
00:01:32,790 --> 00:01:35,190
and I'm returning a new function object
33
00:01:35,190 --> 00:01:37,513
and therefore useEffect will run again.
34
00:01:38,410 --> 00:01:39,690
And that happens because
35
00:01:39,690 --> 00:01:41,810
as I explained earlier in the course
36
00:01:41,810 --> 00:01:43,600
in the behind the scenes module
37
00:01:43,600 --> 00:01:46,330
functions are objects in JavaScript.
38
00:01:46,330 --> 00:01:48,900
And every time a function is recreated
39
00:01:48,900 --> 00:01:50,800
even if it contains the same logic,
40
00:01:50,800 --> 00:01:53,550
it's a brand new object in memory
41
00:01:53,550 --> 00:01:56,700
and therefore useEffect would treat it as a new value,
42
00:01:56,700 --> 00:01:58,820
even if it's technically the same function
43
00:01:58,820 --> 00:02:00,363
and it would re execute it.
44
00:02:01,390 --> 00:02:06,390
So to avoid this, we should go to useHttp
45
00:02:06,480 --> 00:02:10,720
and wrap sendRequest with use callback
46
00:02:10,720 --> 00:02:14,180
which we can do also when we use a single weight in there
47
00:02:14,180 --> 00:02:15,283
this is no problem.
48
00:02:16,300 --> 00:02:18,440
So we import useCallback
49
00:02:18,440 --> 00:02:22,823
and then wrap this function here with use callback.
50
00:02:23,820 --> 00:02:27,290
Now use callback, also needs of dependency array of though,
51
00:02:27,290 --> 00:02:28,890
and this dependency array
52
00:02:28,890 --> 00:02:31,943
also should list everything which is being used in here.
53
00:02:32,840 --> 00:02:34,860
And in my case, that is for example,
54
00:02:34,860 --> 00:02:36,910
that requestConfig object
55
00:02:36,910 --> 00:02:40,513
but also this applied data function which recalling.
56
00:02:41,880 --> 00:02:45,220
Now this poses yet another problem though,
57
00:02:45,220 --> 00:02:49,390
since that is the case, we should add request conflict
58
00:02:49,390 --> 00:02:51,593
and apply data as dependencies here.
59
00:02:52,520 --> 00:02:55,670
But of course, both again are objects
60
00:02:55,670 --> 00:03:00,440
requestConfig as a standard JavaScript object,
61
00:03:00,440 --> 00:03:02,010
apply data as a function
62
00:03:02,010 --> 00:03:04,003
which you learned also is an object.
63
00:03:05,150 --> 00:03:07,110
So back and the app component
64
00:03:07,110 --> 00:03:10,610
where we're passing in this object and this function.
65
00:03:10,610 --> 00:03:13,460
We again have to ensure that these objects
66
00:03:13,460 --> 00:03:17,680
are not recreated all the time when this function runs again
67
00:03:17,680 --> 00:03:19,253
which they currently would be.
68
00:03:20,380 --> 00:03:24,510
So here in app component, we also should import useCallback
69
00:03:25,700 --> 00:03:30,700
and wrap transform tasks here with useCallback for example,
70
00:03:31,840 --> 00:03:33,700
and add our dependency array here
71
00:03:33,700 --> 00:03:36,200
and here we don't have to add anything
72
00:03:36,200 --> 00:03:39,230
because in here I'm not using anything external
73
00:03:39,230 --> 00:03:42,880
other than set tasks which is a state updating function.
74
00:03:42,880 --> 00:03:45,080
And as explained multiple times in the course,
75
00:03:45,080 --> 00:03:47,393
these are guaranteed to never change.
76
00:03:48,480 --> 00:03:50,960
And if this is looking cumbersome, yep.
77
00:03:50,960 --> 00:03:52,820
it can be tricky to get into,
78
00:03:52,820 --> 00:03:55,000
it might look like a lot of work
79
00:03:55,000 --> 00:03:58,040
but it is something you're getting used to over time
80
00:03:58,040 --> 00:04:01,043
and it is very logical in the end.
81
00:04:02,210 --> 00:04:06,550
It is simply related to how JavaScript works after all.
82
00:04:06,550 --> 00:04:07,960
Now with that we're guaranteeing
83
00:04:07,960 --> 00:04:12,030
that transform tasks will not change all the time,
84
00:04:12,030 --> 00:04:14,260
but this object here will
85
00:04:14,260 --> 00:04:16,379
we are recreating it here all the time.
86
00:04:16,379 --> 00:04:20,670
whenever the app component is re-evaluated.
87
00:04:20,670 --> 00:04:23,900
So to work around that, we could look into use memo
88
00:04:23,900 --> 00:04:25,160
or anything like that
89
00:04:25,160 --> 00:04:28,090
to ensure that this object doesn't change all the time
90
00:04:28,090 --> 00:04:31,160
or we change our accustom hook again.
91
00:04:31,160 --> 00:04:34,200
Instead of accepting the requestConfig here
92
00:04:34,200 --> 00:04:36,070
in the hook itself,
93
00:04:36,070 --> 00:04:40,140
why don't we expect that here in the send request function
94
00:04:40,140 --> 00:04:41,760
after all that is the function
95
00:04:41,760 --> 00:04:43,843
which is being called with that Config.
96
00:04:44,850 --> 00:04:48,900
So we could expect this requestConfig object,
97
00:04:48,900 --> 00:04:53,900
not here in useHttp, but here in send request, so here.
98
00:04:54,200 --> 00:04:59,200
Then we don't need to add it as a dependency here
99
00:04:59,890 --> 00:05:03,670
because it's now a parameter of this wrapped function,
100
00:05:03,670 --> 00:05:05,683
not an external dependency.
101
00:05:06,660 --> 00:05:09,200
And therefore we got rid of this issue
102
00:05:09,200 --> 00:05:13,210
and in app component, all we gotta do is take this object
103
00:05:13,210 --> 00:05:16,190
with the URL and remove it here
104
00:05:16,190 --> 00:05:19,080
so that transform tasks is the only function
105
00:05:19,080 --> 00:05:21,510
we're passing to useHttp.
106
00:05:21,510 --> 00:05:24,300
and we then go to fetchTasks
107
00:05:24,300 --> 00:05:27,410
where we are sending the request in the end,
108
00:05:27,410 --> 00:05:30,745
keep in mind that fetchTasks is just send requests because
109
00:05:30,745 --> 00:05:35,745
of this alias in here and we pass our conflict object here.
110
00:05:36,130 --> 00:05:37,653
That's something we could do.
111
00:05:38,590 --> 00:05:41,080
And of course we could do something similar
112
00:05:41,080 --> 00:05:43,720
with the data transformation function.
113
00:05:43,720 --> 00:05:46,580
If using use call that here in app component
114
00:05:46,580 --> 00:05:50,100
is too cumbersome for you if you don't like this approach.
115
00:05:50,100 --> 00:05:51,790
We can get rid of that
116
00:05:51,790 --> 00:05:56,720
and instead just pass transform tasks
117
00:05:56,720 --> 00:06:01,427
as second argument to fetch tasks here
118
00:06:03,040 --> 00:06:07,180
and not to use Http so that we called useHttp
119
00:06:07,180 --> 00:06:08,683
without any arguments.
120
00:06:09,830 --> 00:06:13,610
And we actually create transform tasks.
121
00:06:13,610 --> 00:06:15,760
Oops, get rid of D dependencies here.
122
00:06:15,760 --> 00:06:20,760
We create transform tasks like this instead of the effect,
123
00:06:20,830 --> 00:06:23,150
then there's all there's no external dependency
124
00:06:23,150 --> 00:06:24,260
in the effect.
125
00:06:24,260 --> 00:06:27,690
And now we make sure that you useHttp
126
00:06:27,690 --> 00:06:30,570
our customer who can be called without any dependencies
127
00:06:30,570 --> 00:06:32,270
or without any parameters,
128
00:06:32,270 --> 00:06:36,410
because we're passing the request specific configuration
129
00:06:36,410 --> 00:06:38,250
and the data transformation
130
00:06:38,250 --> 00:06:41,370
that should be applied after the request was sent
131
00:06:41,370 --> 00:06:42,993
directly to the request.
132
00:06:44,440 --> 00:06:46,650
And I showed both alternatives
133
00:06:46,650 --> 00:06:49,820
because both would be viable ways of doing it.
134
00:06:49,820 --> 00:06:52,940
And I also wanted to show you what the potential downfalls
135
00:06:52,940 --> 00:06:56,120
or disadvantages of the other approach are.
136
00:06:56,120 --> 00:06:59,030
Now, of course, we need to go to use Http
137
00:06:59,030 --> 00:07:01,760
and not expect apply data here
138
00:07:01,760 --> 00:07:04,260
as a parameter off the custom hook
139
00:07:04,260 --> 00:07:08,333
but instead here for send request.
140
00:07:09,180 --> 00:07:12,310
And with that of course, useCallback here
141
00:07:12,310 --> 00:07:15,590
in our custom hook has no dependencies anymore
142
00:07:15,590 --> 00:07:17,890
because all the data it's operating on
143
00:07:17,890 --> 00:07:21,010
is received as parameters in the rapt functions.
144
00:07:21,010 --> 00:07:23,303
We've got no external dependencies here.
145
00:07:24,890 --> 00:07:29,070
And with all of that, if we go back to app.js
146
00:07:29,070 --> 00:07:32,670
we now have code that should run without an infinite loop
147
00:07:32,670 --> 00:07:34,910
and without any issues.
148
00:07:34,910 --> 00:07:36,740
If we now go back and reload,
149
00:07:36,740 --> 00:07:38,940
the tasks are still being fetched.
150
00:07:38,940 --> 00:07:40,460
And again, I'm fully aware
151
00:07:40,460 --> 00:07:42,980
of the fact that this can be confusing.
152
00:07:42,980 --> 00:07:44,530
I hope I could still explain
153
00:07:44,530 --> 00:07:46,940
why the different steps were needed.
154
00:07:46,940 --> 00:07:49,410
Of course I could have shown you that final solution
155
00:07:49,410 --> 00:07:50,660
right from the start,
156
00:07:50,660 --> 00:07:53,180
but it is super important to understand
157
00:07:53,180 --> 00:07:55,800
that there are different ways of achieving this
158
00:07:55,800 --> 00:07:58,960
and the other solution wasn't bad or wrong.
159
00:07:58,960 --> 00:08:00,460
This is just as solution
160
00:08:00,460 --> 00:08:03,160
which minimizes the number of dependencies
161
00:08:03,160 --> 00:08:05,320
makes it a bit easier to manage
162
00:08:05,320 --> 00:08:08,250
but the average solution would have been fine as well.
163
00:08:08,250 --> 00:08:09,470
And most importantly
164
00:08:09,470 --> 00:08:14,080
I wanted to make it clear why we derived this solution now
165
00:08:14,080 --> 00:08:17,550
and why I'm going with this solution now.
166
00:08:17,550 --> 00:08:19,220
With all of that though,
167
00:08:19,220 --> 00:08:22,520
the hook is looking good and app.js works.
168
00:08:22,520 --> 00:08:23,820
But of course, the main reason
169
00:08:23,820 --> 00:08:26,300
for adding the hook in the first place
170
00:08:26,300 --> 00:08:29,770
was to reuse logic across components.
171
00:08:29,770 --> 00:08:32,980
And here in the app component we're fine now
172
00:08:32,980 --> 00:08:36,570
but we still got our new task component
173
00:08:36,570 --> 00:08:39,350
where we also are sending our request.
174
00:08:39,350 --> 00:08:42,903
So let's use our custom hook there as a next step.
13795
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.