Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,210 --> 00:00:06,840
So in the previous video, we covered how we can set up a conditional inside the use effect callback
2
00:00:06,840 --> 00:00:07,210
function.
3
00:00:07,620 --> 00:00:17,340
Our question still remains, is this the only possible setup where our usufruct runs after every event
4
00:00:17,940 --> 00:00:18,810
and by default?
5
00:00:18,820 --> 00:00:19,950
Yes, that is the case.
6
00:00:19,980 --> 00:00:23,770
However, you can also notice the two comments that I left here.
7
00:00:23,940 --> 00:00:25,140
One is the cleanup function.
8
00:00:25,260 --> 00:00:27,060
Something will cover the next video.
9
00:00:27,400 --> 00:00:31,020
And I would want to talk about the second parameter.
10
00:00:31,230 --> 00:00:33,980
So what on earth is that?
11
00:00:34,410 --> 00:00:41,700
And essentially second parameter is something that we can add here as far as the user.
12
00:00:42,300 --> 00:00:43,820
So we have our function.
13
00:00:44,190 --> 00:00:48,720
So that is the functionality that will run every time we call the user.
14
00:00:49,260 --> 00:00:58,890
But as far as the second argument, we can also pass it here a array, and that is the array of dependencies.
15
00:00:59,100 --> 00:01:02,760
So essentially that is called a list of dependencies.
16
00:01:03,060 --> 00:01:11,160
And if we leave this blank, that just means that it will only run on the initial render.
17
00:01:11,940 --> 00:01:19,890
And I noticed something interesting where as far as our logic, it technically is looking for the value
18
00:01:20,100 --> 00:01:22,410
if it is bigger or equal than one.
19
00:01:22,950 --> 00:01:23,550
Correct.
20
00:01:23,970 --> 00:01:26,880
So it will run on the initial runner.
21
00:01:27,000 --> 00:01:28,990
And then we have a statement, of course.
22
00:01:29,310 --> 00:01:36,480
So essentially, once we say this shouldn't update the title originally.
23
00:01:36,480 --> 00:01:36,750
Right.
24
00:01:37,050 --> 00:01:43,530
Because we have or if condition, however, we did call it, we can clearly see that, yes, we have
25
00:01:43,530 --> 00:01:43,950
call.
26
00:01:44,160 --> 00:01:46,470
In fact, that is, of course, coming from the console.
27
00:01:47,040 --> 00:01:55,070
Now, the first time I click noticed something interesting where I clicked, I updated the value.
28
00:01:55,080 --> 00:02:02,800
But since I have that second argument, I have that dependency list and I have nothing in there.
29
00:02:03,060 --> 00:02:04,620
Essentially, it is empty.
30
00:02:04,890 --> 00:02:08,750
It only runs on the initial render.
31
00:02:09,110 --> 00:02:13,710
And that is something very, very important that you should remember.
32
00:02:14,070 --> 00:02:23,100
So if you only want that user to run on the initial render, you just add that second argument and you
33
00:02:23,100 --> 00:02:25,880
would pass it as a empty.
34
00:02:25,920 --> 00:02:26,360
All right.
35
00:02:26,640 --> 00:02:30,320
That just means that it will run on the initial render.
36
00:02:30,600 --> 00:02:36,600
Now, the second question probably is, well, can we add more stuff in there?
37
00:02:37,350 --> 00:02:38,310
Because it's fine.
38
00:02:38,560 --> 00:02:39,050
All right.
39
00:02:39,060 --> 00:02:46,050
It runs on the initial render, but maybe I would want to run it each and every time I change some kind
40
00:02:46,050 --> 00:02:46,440
of value.
41
00:02:46,800 --> 00:02:49,320
Now, what that value could be, we're here.
42
00:02:49,800 --> 00:02:54,560
We could maybe run it each and every time we update that value.
43
00:02:54,720 --> 00:02:55,510
So let's try it out.
44
00:02:55,890 --> 00:02:58,520
So in here, in the dependancy, right.
45
00:02:58,740 --> 00:03:03,820
We just pass and whatever name is for our dependency.
46
00:03:03,870 --> 00:03:08,850
So in this case, of course, it is the value, if it would be you perhaps in text and hopefully you
47
00:03:08,850 --> 00:03:09,390
get the gist.
48
00:03:09,750 --> 00:03:14,220
So now once I say it again, it runs on the initial render.
49
00:03:14,400 --> 00:03:15,510
That is beautiful.
50
00:03:15,780 --> 00:03:21,790
But now you'll notice that we'll also run once we increase the value.
51
00:03:22,140 --> 00:03:26,970
So once we increase the value, we change something about alleged dependency.
52
00:03:27,300 --> 00:03:33,990
And then the moment we change something about that value, of course, then we trigger use effect to
53
00:03:33,990 --> 00:03:37,960
run one more time since independence.
54
00:03:38,000 --> 00:03:41,070
You're right, we have this value.
55
00:03:41,670 --> 00:03:47,790
So each and every time we'll change something about this value, essentially we will run the use effect
56
00:03:47,790 --> 00:03:48,380
as well.
57
00:03:48,870 --> 00:03:50,340
So that's something to remember.
58
00:03:50,340 --> 00:03:57,990
Or by default, if you have no dependency or the user effect will run each and every time the component
59
00:03:57,990 --> 00:04:05,850
gets re rendered, including the initial render that if we set up the second parameter, the dependency
60
00:04:05,850 --> 00:04:13,890
array, as far as the empty list, meaning and the array, then of course it will run only once we render
61
00:04:13,890 --> 00:04:14,490
a component.
62
00:04:14,700 --> 00:04:21,900
And then as we start adding different values here as far as different dependencies, then each and every
63
00:04:21,900 --> 00:04:28,320
time that dependency will change, if it is added to an array, then also use effect will run.
64
00:04:28,740 --> 00:04:36,160
And one more thing that I would want to add is that you can have as many used effects as you want.
65
00:04:36,510 --> 00:04:43,950
So, for example, in this case, we have one use effect that will run on the initial render and also
66
00:04:43,950 --> 00:04:44,940
when the value changes.
67
00:04:45,150 --> 00:04:48,750
But nothing stops me from setting up another one.
68
00:04:48,990 --> 00:04:54,870
And then again, I have my callback function and in this case I will just set it up to be on the initial
69
00:04:54,870 --> 00:04:55,240
render.
70
00:04:55,470 --> 00:04:56,940
Now, I'm not going to do much.
71
00:04:57,310 --> 00:05:00,480
I'm just going to go with a simple console log and I'll say Hello World.
72
00:05:00,690 --> 00:05:08,490
And what you'll notice is that, yeah, it runs on the initial render, just like the previous use effect
73
00:05:08,490 --> 00:05:09,710
of we have.
74
00:05:09,840 --> 00:05:12,960
However, even though we're on the second time.
75
00:05:13,260 --> 00:05:18,710
So each and every time I'll click on a button, you'll notice that you use a fact.
76
00:05:18,720 --> 00:05:27,130
The second one will tell the world doesn't run because the value is not in the dependency list.
77
00:05:27,450 --> 00:05:29,100
Hopefully that makes sense.
78
00:05:29,400 --> 00:05:32,610
And now we can talk about the clean up function.
7032
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.