Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,170 --> 00:00:03,570
Now, there is one last,
2
00:00:03,570 --> 00:00:06,350
important thing you need to know about useEffect
3
00:00:06,350 --> 00:00:08,899
or about the built-in features of UseEffect.
4
00:00:08,899 --> 00:00:11,010
We learned about this effect function.
5
00:00:11,010 --> 00:00:13,940
We learned about the dependencies with the scenario
6
00:00:13,940 --> 00:00:14,990
that we have.
7
00:00:14,990 --> 00:00:18,010
No dependencies with an empty array
8
00:00:18,010 --> 00:00:20,277
or that we have some dependencies.
9
00:00:20,277 --> 00:00:24,500
Now, sometimes you also have an effect that needs
10
00:00:24,500 --> 00:00:25,624
to do some cleanup work.
11
00:00:25,624 --> 00:00:27,930
And that sounds very abstract,
12
00:00:27,930 --> 00:00:30,503
so let me give you a more concrete sample.
13
00:00:30,503 --> 00:00:34,330
Let's say here, we're executing this function
14
00:00:34,330 --> 00:00:36,260
essentially on every keystroke.
15
00:00:36,260 --> 00:00:37,570
This is what happens here.
16
00:00:37,570 --> 00:00:38,670
I can prove this to you.
17
00:00:38,670 --> 00:00:43,670
If I console.log this, "Checking form validity!",
18
00:00:44,070 --> 00:00:48,253
you will see, if you go back here to the console,
19
00:00:51,090 --> 00:00:54,930
with every keystroke, this runs.
20
00:00:54,930 --> 00:00:56,320
Now, that's not a problem here.
21
00:00:56,320 --> 00:00:58,659
This function execution is fairly fast.
22
00:00:58,659 --> 00:01:02,323
But what you do in this function, that might be a problem.
23
00:01:02,323 --> 00:01:05,021
Here, we are updating some state.
24
00:01:05,021 --> 00:01:08,210
This might already not be ideal.
25
00:01:08,210 --> 00:01:09,043
And I'll be honest,
26
00:01:09,043 --> 00:01:11,800
for this simple state update it won't be a problem,
27
00:01:11,800 --> 00:01:13,069
but of course it means
28
00:01:13,069 --> 00:01:17,027
that it triggers another function component execution,
29
00:01:17,027 --> 00:01:20,550
and that React again needs to check whether it needs
30
00:01:20,550 --> 00:01:22,109
to change something in the DOM.
31
00:01:22,109 --> 00:01:26,067
So even that might not be something you really wanna do
32
00:01:26,067 --> 00:01:27,485
for every keystroke.
33
00:01:27,485 --> 00:01:30,807
Now imagine you would do something more complex,
34
00:01:30,807 --> 00:01:34,590
like, for example, send an HTTP request
35
00:01:34,590 --> 00:01:37,240
to some backend where you check
36
00:01:37,240 --> 00:01:39,958
if a username is already in use.
37
00:01:39,958 --> 00:01:43,320
You don't wanna do that with every keystroke.
38
00:01:43,320 --> 00:01:44,160
Because if you do,
39
00:01:44,160 --> 00:01:48,144
that means you're going to be sending a lot of requests.
40
00:01:48,144 --> 00:01:50,920
And I don't know about you,
41
00:01:50,920 --> 00:01:54,041
but that might be a lot of unnecessary network traffic.
42
00:01:54,041 --> 00:01:57,160
So that's something you might wanna avoid.
43
00:01:57,160 --> 00:01:58,720
And as I said, even this here,
44
00:01:58,720 --> 00:02:02,040
this state updating is something you might not wanna do
45
00:02:02,040 --> 00:02:03,120
on every keystroke.
46
00:02:03,120 --> 00:02:05,868
Instead, something you might want to do is
47
00:02:05,868 --> 00:02:09,658
that you collect a certain amount of keystrokes,
48
00:02:09,658 --> 00:02:12,720
or you simply wait for a pause
49
00:02:12,720 --> 00:02:15,690
of a certain time duration after a keystroke.
50
00:02:15,690 --> 00:02:18,030
And only if the pause is long enough,
51
00:02:18,030 --> 00:02:19,840
you go ahead and do your thing.
52
00:02:19,840 --> 00:02:23,263
So for example, here, whilst the user is actively typing,
53
00:02:23,263 --> 00:02:26,501
I might not wanna check if it's a valid email address.
54
00:02:26,501 --> 00:02:30,241
I care about when the user stops typing.
55
00:02:30,241 --> 00:02:34,010
So for example, here, when I type, and then I stop for,
56
00:02:34,010 --> 00:02:36,800
let's say, 500 milliseconds or longer,
57
00:02:36,800 --> 00:02:38,123
then I wanna check.
58
00:02:38,123 --> 00:02:41,424
Okay, the user seems to be done, let's see if it's valid.
59
00:02:41,424 --> 00:02:43,580
That's something we might wanna do.
60
00:02:43,580 --> 00:02:44,980
And the same for the password.
61
00:02:44,980 --> 00:02:47,475
Now that's a technique which is called debouncing.
62
00:02:47,475 --> 00:02:49,760
We wanna debounce the user input.
63
00:02:49,760 --> 00:02:51,880
We wanna make sure we're not doing something
64
00:02:51,880 --> 00:02:53,219
with it on every keystroke,
65
00:02:53,219 --> 00:02:56,680
but once the user made a pause during typing.
66
00:02:56,680 --> 00:02:59,582
And with useEffect, it's actually easy to implement.
67
00:02:59,582 --> 00:03:01,560
We can use setTimeout,
68
00:03:01,560 --> 00:03:04,936
which is a function built into the browser, to wait for,
69
00:03:04,936 --> 00:03:07,096
for example, 500 milliseconds
70
00:03:07,096 --> 00:03:09,943
until we execute some function.
71
00:03:10,884 --> 00:03:12,930
Now, in this function,
72
00:03:12,930 --> 00:03:15,340
we might want to check our form validity
73
00:03:16,185 --> 00:03:18,686
or to update our form validity.
74
00:03:18,686 --> 00:03:23,573
Now we would only do this after 500 milliseconds.
75
00:03:23,573 --> 00:03:26,170
Now, if I move my console.log in here,
76
00:03:26,170 --> 00:03:28,320
you will see that this alone doesn't do much.
77
00:03:28,320 --> 00:03:30,980
The only result is that we don't see the output immediately
78
00:03:30,980 --> 00:03:33,561
but with a slight delay of 500 milliseconds,
79
00:03:33,561 --> 00:03:37,020
which makes sense because for every keystroke,
80
00:03:37,020 --> 00:03:38,320
we're now setting a timer
81
00:03:38,320 --> 00:03:40,563
and after 500 milliseconds, we do this.
82
00:03:40,563 --> 00:03:44,814
Well, the trick is that we actually save the timer.
83
00:03:44,814 --> 00:03:47,751
And for the next keystroke, we clear it
84
00:03:47,751 --> 00:03:51,951
so that we only have one ongoing timer at a time.
85
00:03:51,951 --> 00:03:55,493
And only the last timer will, therefore, complete.
86
00:03:55,493 --> 00:03:57,518
And as long as the user keeps on typing,
87
00:03:57,518 --> 00:03:59,720
we always clear all other timers.
88
00:03:59,720 --> 00:04:03,090
And therefore, we only have one timer that completes,
89
00:04:03,090 --> 00:04:05,580
and that completes after 500 milliseconds,
90
00:04:05,580 --> 00:04:08,740
which is the delay the user has to issue a new keystroke
91
00:04:08,740 --> 00:04:11,204
to clear this timer.
92
00:04:11,204 --> 00:04:13,950
Now that might sound complex to implement,
93
00:04:13,950 --> 00:04:16,653
but useEffect makes that very easy actually.
94
00:04:17,630 --> 00:04:19,589
In the useEffect function,
95
00:04:19,589 --> 00:04:21,774
so the function you pass as a first argument,
96
00:04:21,774 --> 00:04:24,694
you can do something we haven't done before.
97
00:04:24,694 --> 00:04:26,574
You can return something.
98
00:04:26,574 --> 00:04:29,680
Now the something you return here has
99
00:04:29,680 --> 00:04:31,054
to be one specific thing.
100
00:04:31,054 --> 00:04:33,214
It needs to be a function itself.
101
00:04:33,214 --> 00:04:35,817
So here you can also return a function,
102
00:04:35,817 --> 00:04:38,996
for example, an anonymous arrow function.
103
00:04:38,996 --> 00:04:41,980
But it could also be a named function just
104
00:04:41,980 --> 00:04:45,420
as for all the places where I'm using anonymous functions.
105
00:04:45,420 --> 00:04:48,681
So we are returning this anonymous arrow function here.
106
00:04:48,681 --> 00:04:51,540
That's a so-called cleanup function.
107
00:04:51,540 --> 00:04:54,612
This will run as a cleanup process
108
00:04:54,612 --> 00:04:59,612
before useEffect executes this function the next time.
109
00:04:59,670 --> 00:05:02,020
So to make it clear when this runs,
110
00:05:02,020 --> 00:05:05,100
whenever this useEffect function runs,
111
00:05:05,100 --> 00:05:09,225
before it runs, except for the very first time when it runs,
112
00:05:09,225 --> 00:05:12,114
this cleanup function will run.
113
00:05:12,114 --> 00:05:14,880
And in addition, the cleanup function will run
114
00:05:14,880 --> 00:05:18,302
whenever the component you're specifying the effect in
115
00:05:18,302 --> 00:05:20,260
unmounts from the DOM.
116
00:05:20,260 --> 00:05:22,440
So whenever the component is reused.
117
00:05:22,440 --> 00:05:24,230
So the cleanup function runs
118
00:05:24,230 --> 00:05:27,500
before every new side effect function execution
119
00:05:27,500 --> 00:05:29,420
and before the component is removed.
120
00:05:29,420 --> 00:05:30,585
And it does not run
121
00:05:30,585 --> 00:05:34,552
before the first side effect function execution.
122
00:05:34,552 --> 00:05:36,402
But thereafter, it will run
123
00:05:36,402 --> 00:05:40,164
before every next side effect function execution.
124
00:05:40,164 --> 00:05:44,620
So we can simply console.log 'CLEANUP' here
125
00:05:44,620 --> 00:05:46,363
to get a feeling for when it runs.
126
00:05:47,920 --> 00:05:49,050
If I reload this page,
127
00:05:49,050 --> 00:05:51,316
you see "Checking form validity!" ran.
128
00:05:51,316 --> 00:05:54,550
So this code ran clearly,
129
00:05:54,550 --> 00:05:56,860
our main side effect function code.
130
00:05:56,860 --> 00:05:58,521
But we don't see the cleanup call.
131
00:05:58,521 --> 00:06:02,560
We don't see the cleanup log because of what I said.
132
00:06:02,560 --> 00:06:07,062
It does not run before the very first side-effect execution.
133
00:06:07,062 --> 00:06:09,830
But if I then type here just one character,
134
00:06:09,830 --> 00:06:11,490
you'll see cleanup runs immediately,
135
00:06:11,490 --> 00:06:16,490
and then the code inside of this side effect function,
136
00:06:17,277 --> 00:06:19,540
inside of this function here, sorry,
137
00:06:19,540 --> 00:06:21,653
this code here executed.
138
00:06:23,000 --> 00:06:24,500
So that's how cleanup runs.
139
00:06:24,500 --> 00:06:28,363
It runs before every new side effect function execution.
140
00:06:29,477 --> 00:06:31,280
So with this in mind,
141
00:06:31,280 --> 00:06:33,380
we can use the fact
142
00:06:33,380 --> 00:06:38,380
that SetTimeout actually returns a handler, let's say,
143
00:06:38,790 --> 00:06:43,790
or actually, an identifier for the timer that was set.
144
00:06:44,309 --> 00:06:49,020
And we can use this identifier to clear this timer
145
00:06:49,020 --> 00:06:52,200
with the built-in clearTimeout function,
146
00:06:52,200 --> 00:06:53,770
which is built into the browser.
147
00:06:53,770 --> 00:06:57,170
So this has nothing to do with the effects or with React.
148
00:06:57,170 --> 00:06:59,400
This is built into the browser.
149
00:06:59,400 --> 00:07:01,170
Now I don't wanna run it here.
150
00:07:01,170 --> 00:07:03,964
I wanna run it in my cleanup function instead.
151
00:07:03,964 --> 00:07:06,430
There, I call clearTimeout
152
00:07:06,430 --> 00:07:09,646
and pass the identifier of this timeout to it.
153
00:07:09,646 --> 00:07:13,940
And this makes sure that whenever the cleanup function runs,
154
00:07:13,940 --> 00:07:16,890
I clear the timer that was set
155
00:07:16,890 --> 00:07:19,760
before this cleanup function ran,
156
00:07:19,760 --> 00:07:22,062
so in the last side effect function execution,
157
00:07:22,062 --> 00:07:25,699
so that when the next side-effect execution is due,
158
00:07:25,699 --> 00:07:27,827
we are able to set a new timer.
159
00:07:27,827 --> 00:07:32,420
So we clear the last timer before we set a new one.
160
00:07:32,420 --> 00:07:34,030
That's what's happening here.
161
00:07:34,030 --> 00:07:36,602
And again, if the order is not clear to you,
162
00:07:36,602 --> 00:07:39,460
have a look at those console.log statements,
163
00:07:39,460 --> 00:07:42,963
this one and this one, and see in which order they execute.
164
00:07:44,310 --> 00:07:45,537
So therefor, now, if I reload,
165
00:07:45,537 --> 00:07:47,899
we see "Checking form validity!".
166
00:07:47,899 --> 00:07:50,507
And now, if I type here, CLEANUP,
167
00:07:50,507 --> 00:07:52,682
and then again, "Checking form validity!".
168
00:07:52,682 --> 00:07:56,923
But now, here, if I type a lot very quickly,
169
00:07:57,852 --> 00:07:59,470
you see a lot of CLEANUPS,
170
00:07:59,470 --> 00:08:02,230
but you only see one "Checking form validity!".
171
00:08:02,230 --> 00:08:03,440
Again, let me show this to you.
172
00:08:03,440 --> 00:08:07,877
If I clear this, and now again, if I type quickly,
173
00:08:07,877 --> 00:08:10,693
only one "Checking form validity!".
174
00:08:10,693 --> 00:08:15,514
And that means that this code in here only ran once
175
00:08:15,514 --> 00:08:17,354
for all those keystrokes.
176
00:08:17,354 --> 00:08:19,560
And that's what I mentioned earlier.
177
00:08:19,560 --> 00:08:21,952
If we want to be sending an HTTP request here,
178
00:08:21,952 --> 00:08:24,429
we would have now only sent once
179
00:08:24,429 --> 00:08:27,600
instead of a dozen HTTP requests.
180
00:08:27,600 --> 00:08:28,688
And that's an improvement.
181
00:08:28,688 --> 00:08:32,842
And of course, also a nice example for this cleanup function
182
00:08:32,842 --> 00:08:35,642
and when it matters and how it works.
183
00:08:35,642 --> 00:08:37,950
And of course, needless to say,
184
00:08:37,950 --> 00:08:41,299
that our form here still works as before just
185
00:08:41,299 --> 00:08:45,530
with a slight delay, which you of course can control.
186
00:08:45,530 --> 00:08:49,180
You can lower this number here, fine-tune it to your needs.
187
00:08:49,180 --> 00:08:50,794
But this is a great example
188
00:08:50,794 --> 00:08:53,433
for the cleanup function and how it works.
14804
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.