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.