Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,855 --> 00:00:04,240
useEffect besides useState
2
00:00:04,240 --> 00:00:06,939
is the most important React hook you have.
3
00:00:06,939 --> 00:00:08,570
So you need to understand it.
4
00:00:08,570 --> 00:00:10,850
Therefore, I again, want to make it clear
5
00:00:10,850 --> 00:00:13,535
at which point of time, which part of useEffect
6
00:00:13,535 --> 00:00:15,770
kicks in and executes.
7
00:00:15,770 --> 00:00:18,720
And for this, again, here in the log in component,
8
00:00:18,720 --> 00:00:21,470
I'll add a new useEffect call
9
00:00:21,470 --> 00:00:24,130
where I only add this first argument.
10
00:00:24,130 --> 00:00:26,630
So for the moment, no second argument.
11
00:00:26,630 --> 00:00:28,490
And in there we can log,
12
00:00:28,490 --> 00:00:30,473
effect running.
13
00:00:32,122 --> 00:00:34,580
Now, at the moment we have no information
14
00:00:34,580 --> 00:00:35,500
about the dependencies,
15
00:00:35,500 --> 00:00:37,410
we just have this first argument.
16
00:00:37,410 --> 00:00:39,170
And this is a valid way of using it,
17
00:00:39,170 --> 00:00:42,110
though you will rarely use useEffect like this.
18
00:00:42,110 --> 00:00:44,700
The reason for this is that if I reload,
19
00:00:44,700 --> 00:00:47,760
you see it runs when the component first mounts,
20
00:00:47,760 --> 00:00:51,370
so when this login component is rendered for the first time,
21
00:00:51,370 --> 00:00:53,560
but then also for every state update.
22
00:00:53,560 --> 00:00:55,930
For example, if I click in here and click out of there,
23
00:00:55,930 --> 00:00:57,370
we see, effect running.
24
00:00:57,370 --> 00:01:00,650
For every keystroke we see, effect running.
25
00:01:00,650 --> 00:01:03,241
So this really now runs for every time
26
00:01:03,241 --> 00:01:05,280
this component function reruns
27
00:01:05,280 --> 00:01:07,690
because you learned this effect function
28
00:01:07,690 --> 00:01:11,590
runs after every component render cycle.
29
00:01:11,590 --> 00:01:15,330
Not before it and not during it, but after it.
30
00:01:15,330 --> 00:01:18,193
Including the first time this component was mounted.
31
00:01:20,180 --> 00:01:23,810
Now, this changes once we add an empty array.
32
00:01:23,810 --> 00:01:26,651
Now this function here, only executes
33
00:01:26,651 --> 00:01:30,760
for the first time this component was mounted and rendered,
34
00:01:30,760 --> 00:01:35,760
but not thereafter, not for any subsequent rerender cycle.
35
00:01:35,900 --> 00:01:37,850
So we see in fact, running here,
36
00:01:37,850 --> 00:01:40,730
but for the keystrokes, we don't see it.
37
00:01:40,730 --> 00:01:44,560
Now if I log in, we also don't see it again.
38
00:01:44,560 --> 00:01:46,683
So it really only ran once.
39
00:01:47,859 --> 00:01:50,270
Alternatively, we add a dependency
40
00:01:50,270 --> 00:01:52,910
like entered email or entered password.
41
00:01:52,910 --> 00:01:54,670
Now this function here,
42
00:01:54,670 --> 00:01:58,430
reruns whenever the component was re-evaluated
43
00:01:58,430 --> 00:02:02,420
and this state, in this case here, changed.
44
00:02:02,420 --> 00:02:04,160
So if I now log out and reload,
45
00:02:04,160 --> 00:02:07,580
we see effect running, for the first time this was mounted,
46
00:02:07,580 --> 00:02:11,030
but now for keystrokes in the email, nothing changes.
47
00:02:11,030 --> 00:02:14,730
For keystrokes in password, we see effect running though,
48
00:02:14,730 --> 00:02:17,063
because the password is a dependency.
49
00:02:18,740 --> 00:02:22,060
We also have the cleanup function, which we can return.
50
00:02:22,060 --> 00:02:24,312
This cleanup function runs before
51
00:02:24,312 --> 00:02:27,960
this state function as a whole, runs,
52
00:02:27,960 --> 00:02:30,790
but not before the first time it runs.
53
00:02:30,790 --> 00:02:32,650
So here I will, again,
54
00:02:32,650 --> 00:02:36,380
log, effect, cleanup,
55
00:02:36,380 --> 00:02:37,620
save this.
56
00:02:37,620 --> 00:02:39,520
We see only effect running here
57
00:02:39,520 --> 00:02:43,960
for the first render cycle, for the email, nothing happens.
58
00:02:43,960 --> 00:02:45,750
That's a different cleanup log.
59
00:02:45,750 --> 00:02:48,080
This is coming from our other effect.
60
00:02:48,080 --> 00:02:51,330
So effect cleanup did not print yet.
61
00:02:51,330 --> 00:02:53,600
But once I start typing in the password,
62
00:02:53,600 --> 00:02:55,750
we see effect cleanup being triggered
63
00:02:55,750 --> 00:02:59,023
and it triggers before the effect function runs.
64
00:03:00,040 --> 00:03:04,780
Now, if we had an empty array here, so no dependencies,
65
00:03:04,780 --> 00:03:07,880
we learned that we only see effect running once,
66
00:03:07,880 --> 00:03:10,160
and the cleanup function in this case,
67
00:03:10,160 --> 00:03:12,750
would run when the component is removed.
68
00:03:12,750 --> 00:03:13,970
So in this case for example,
69
00:03:13,970 --> 00:03:17,000
when I log in and the component is removed from the DOM,
70
00:03:17,000 --> 00:03:19,320
we see effect cleanup.
71
00:03:19,320 --> 00:03:21,850
So that's how useEffect works,
72
00:03:21,850 --> 00:03:24,900
and how the different parts of it are related
73
00:03:24,900 --> 00:03:26,120
and when they execute.
74
00:03:26,120 --> 00:03:28,950
It's really important to understand this
75
00:03:28,950 --> 00:03:31,790
so if it's not 100% clear at this point,
76
00:03:31,790 --> 00:03:34,430
definitely go through those last lectures again
77
00:03:34,430 --> 00:03:36,133
to make sure it is clear.
5961
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.