Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,060 --> 00:00:03,240
So, at this point
2
00:00:03,240 --> 00:00:05,490
we already achieved quite a lot
3
00:00:05,490 --> 00:00:08,430
but there's one thing which is unrealistic
4
00:00:08,430 --> 00:00:10,810
at least in some applications.
5
00:00:10,810 --> 00:00:12,530
Currently, we're always fetching data
6
00:00:12,530 --> 00:00:14,360
when this button is pressed.
7
00:00:14,360 --> 00:00:17,350
Now, in a lot of applications you wanna fetch data
8
00:00:17,350 --> 00:00:21,040
as soon as a certain component loads, right?
9
00:00:21,040 --> 00:00:22,650
If a user visits the webpage
10
00:00:22,650 --> 00:00:25,340
you immediately wanna start fetching data
11
00:00:25,340 --> 00:00:27,170
and currently we're not doing that here.
12
00:00:27,170 --> 00:00:30,763
We're just fetching it on demand when the button is pressed.
13
00:00:31,600 --> 00:00:33,130
Now, to immediately fetch it
14
00:00:33,130 --> 00:00:36,630
we can use another concept we already learned about.
15
00:00:36,630 --> 00:00:39,500
We can use the useEffect hook
16
00:00:39,500 --> 00:00:43,900
because sending this HTTP request is a side effect
17
00:00:43,900 --> 00:00:47,260
which ultimately changes our components state.
18
00:00:47,260 --> 00:00:49,830
And you learned that such side effects
19
00:00:49,830 --> 00:00:52,090
should go into useEffect.
20
00:00:52,090 --> 00:00:54,900
Having them into a functions of course also fine
21
00:00:54,900 --> 00:00:57,840
as long as you don't just call this function
22
00:00:57,840 --> 00:01:00,270
as part of your main component function
23
00:01:00,270 --> 00:01:02,630
because then you could create an infinite loop
24
00:01:02,630 --> 00:01:05,687
where you call this function, it updates the state
25
00:01:05,687 --> 00:01:09,660
the component function re-renders or is re-evaluated
26
00:01:09,660 --> 00:01:11,670
and therefore the function is called again
27
00:01:11,670 --> 00:01:13,640
it updates the state to component function
28
00:01:13,640 --> 00:01:15,430
is called again and so on.
29
00:01:15,430 --> 00:01:17,490
We wanna avoid that and that's how we use
30
00:01:17,490 --> 00:01:18,980
useEffect for that.
31
00:01:18,980 --> 00:01:21,940
UseEffect is great if we have code
32
00:01:21,940 --> 00:01:23,140
that should be executed
33
00:01:23,140 --> 00:01:25,940
as part of the component renders cycle
34
00:01:25,940 --> 00:01:29,380
but maybe not always when the component re-renders.
35
00:01:29,380 --> 00:01:32,513
And therefore here we can add useEffect
36
00:01:33,620 --> 00:01:37,310
and then define our effect function here
37
00:01:37,310 --> 00:01:40,980
either as an arrow function or as a regular function
38
00:01:40,980 --> 00:01:42,790
with the function keyword.
39
00:01:42,790 --> 00:01:44,910
And here in useEffect I can of course
40
00:01:44,910 --> 00:01:47,380
simply call fetch movies handler.
41
00:01:47,380 --> 00:01:51,060
I can simply call this function like this.
42
00:01:51,060 --> 00:01:55,370
So, now this function is still called if I click the button
43
00:01:55,370 --> 00:01:56,900
but in addition also
44
00:01:56,900 --> 00:02:00,300
whenever this component is re-evaluated.
45
00:02:00,300 --> 00:02:01,860
Now, of course, I don't wanna call it
46
00:02:01,860 --> 00:02:04,310
whenever this component is re-evaluated
47
00:02:04,310 --> 00:02:06,310
because that would be this infinite task
48
00:02:06,310 --> 00:02:07,900
which I don't want.
49
00:02:07,900 --> 00:02:10,759
Instead, we add our second argument here
50
00:02:10,759 --> 00:02:13,080
which is this array of dependencies
51
00:02:13,080 --> 00:02:16,180
where we define when this effect function
52
00:02:16,180 --> 00:02:17,840
should be executed again.
53
00:02:17,840 --> 00:02:19,290
It will only execute again
54
00:02:19,290 --> 00:02:22,300
if the dependencies listed here change.
55
00:02:22,300 --> 00:02:23,610
Now, as you can clearly tell
56
00:02:23,610 --> 00:02:25,970
I didn't add any dependencies yet.
57
00:02:25,970 --> 00:02:29,320
So, if I save it like this, this will never run again
58
00:02:29,320 --> 00:02:33,570
except for the very first time the component is loaded.
59
00:02:33,570 --> 00:02:35,670
So, hence if we reload this app
60
00:02:35,670 --> 00:02:37,940
the data is fetched immediately.
61
00:02:37,940 --> 00:02:40,640
It's still fetched again if I click the button
62
00:02:40,640 --> 00:02:42,300
but it's also fetched immediately
63
00:02:42,300 --> 00:02:46,227
when this loads for the first time because of useEffect.
64
00:02:47,690 --> 00:02:50,130
Now, technically we're not executing this
65
00:02:50,130 --> 00:02:51,680
in a clean way, though.
66
00:02:51,680 --> 00:02:54,480
You also learned that it is a good practice
67
00:02:54,480 --> 00:02:59,060
and the best practice to list all dependencies you use
68
00:02:59,060 --> 00:03:01,150
instead of the effect function here
69
00:03:01,150 --> 00:03:03,000
in the dependencies array.
70
00:03:03,000 --> 00:03:04,740
Now, I am referring
71
00:03:04,740 --> 00:03:06,980
to the fetch movies handler function here
72
00:03:06,980 --> 00:03:10,140
that is a dependency of this effect.
73
00:03:10,140 --> 00:03:12,670
So, we should add fetched movies handler
74
00:03:12,670 --> 00:03:16,000
a pointer at this function as a dependency.
75
00:03:16,000 --> 00:03:17,970
Because if this function changes
76
00:03:17,970 --> 00:03:20,250
this effect should be re-executed
77
00:03:20,250 --> 00:03:21,900
and this function could change
78
00:03:21,900 --> 00:03:24,840
if we would be using some external state in here.
79
00:03:24,840 --> 00:03:28,010
We aren't doing that in this example but in other examples
80
00:03:28,010 --> 00:03:29,260
we could be doing that.
81
00:03:29,260 --> 00:03:32,290
So, we definitely wanna list this function
82
00:03:32,290 --> 00:03:36,530
a pointer at this function as a dependency of this effect.
83
00:03:36,530 --> 00:03:39,320
The problem with that is that functions of course
84
00:03:39,320 --> 00:03:41,110
are objects as you learned
85
00:03:41,110 --> 00:03:43,860
and therefore these function will technically change
86
00:03:43,860 --> 00:03:46,090
whenever this component re-renders.
87
00:03:46,090 --> 00:03:47,920
So, we will create an infinite loop
88
00:03:47,920 --> 00:03:50,290
if we added as a dependency.
89
00:03:50,290 --> 00:03:52,820
One solution would be to omit it
90
00:03:52,820 --> 00:03:56,240
because here that would indeed achieve the result we want.
91
00:03:56,240 --> 00:03:58,470
But it could introduce subtle bugs
92
00:03:58,470 --> 00:04:02,180
if our function would be using some external state.
93
00:04:02,180 --> 00:04:07,090
So, the better solution is to use the useCallback hook
94
00:04:07,090 --> 00:04:09,190
and import that from react
95
00:04:09,190 --> 00:04:11,893
and to wrap the fetch movies handler with that.
96
00:04:12,870 --> 00:04:17,200
For this we need to transform it and turn it into a constant
97
00:04:18,370 --> 00:04:21,550
which saves the result of useCallback
98
00:04:21,550 --> 00:04:23,190
which then wraps this function
99
00:04:23,190 --> 00:04:25,580
which is now written as an arrow function here
100
00:04:25,580 --> 00:04:30,580
though we could also use the function keyword like this
101
00:04:30,830 --> 00:04:32,890
and we should add our dependencies array
102
00:04:32,890 --> 00:04:35,010
for useCallback as well
103
00:04:35,010 --> 00:04:38,540
and list any dependencies this function might have.
104
00:04:38,540 --> 00:04:41,680
This function though has no external dependencies.
105
00:04:41,680 --> 00:04:44,670
The fetch API is a global browser API
106
00:04:44,670 --> 00:04:46,477
it's not a dependency and other than that
107
00:04:46,477 --> 00:04:48,980
we are not using anything special in here.
108
00:04:48,980 --> 00:04:51,600
These state updating functions as you learned
109
00:04:51,600 --> 00:04:54,080
don't need to be added as dependencies
110
00:04:54,080 --> 00:04:56,803
because react guarantees that they will never change.
111
00:04:58,160 --> 00:05:02,170
Now, I still changed something which would break the app.
112
00:05:02,170 --> 00:05:04,450
I removed the async keyword.
113
00:05:04,450 --> 00:05:06,140
We need to bring this back here
114
00:05:06,140 --> 00:05:09,210
simply in front of this anonymous arrow function.
115
00:05:09,210 --> 00:05:12,000
Async then any parameters we might be getting
116
00:05:12,000 --> 00:05:14,950
then arrow and then the function body.
117
00:05:14,950 --> 00:05:17,090
Alternatively, we can also write it
118
00:05:17,090 --> 00:05:20,010
in a non-arrow functional way like this if we want to
119
00:05:20,010 --> 00:05:23,460
that both works and there is no difference here.
120
00:05:23,460 --> 00:05:26,920
I will go back to the slightly shorter Syntex though.
121
00:05:26,920 --> 00:05:30,180
So, now we ensure that this fetch movie's handler function
122
00:05:30,180 --> 00:05:32,733
is not recreated unnecessarily.
123
00:05:34,290 --> 00:05:37,050
So, if you save that it now crashes though
124
00:05:37,050 --> 00:05:40,230
because the order is now wrong with the function keyword.
125
00:05:40,230 --> 00:05:42,740
It was no problem because of hoisting
126
00:05:42,740 --> 00:05:45,340
now, since this is a const calling it
127
00:05:45,340 --> 00:05:48,180
before this code has been passed won't work.
128
00:05:48,180 --> 00:05:51,680
So, we simply need to move this use effect call
129
00:05:51,680 --> 00:05:54,270
after this function definition
130
00:05:54,270 --> 00:05:56,090
and now it will work again.
131
00:05:56,090 --> 00:05:59,380
And as it works as before without an infinite loop
132
00:05:59,380 --> 00:06:02,480
and we still can also reload manually.
133
00:06:02,480 --> 00:06:05,670
So, that's how we can leverage use of fact to make sure
134
00:06:05,670 --> 00:06:09,370
that we send a HTTP request immediately
135
00:06:09,370 --> 00:06:12,490
when a component loads and not just when a button is clicked
136
00:06:12,490 --> 00:06:14,660
then we still can also do that
137
00:06:14,660 --> 00:06:17,940
and you also learned how to use effect correctly then
138
00:06:17,940 --> 00:06:20,990
and how to ensure that it will really always run
139
00:06:20,990 --> 00:06:25,113
when it needs to run but not when it does not need to run.
11039
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.