1
00:00:00,150 --> 00:00:01,110
Not bad, not bad.

2
00:00:01,320 --> 00:00:06,790
We're done with the first part of our tutorial, the U.S. State Hook.

3
00:00:07,080 --> 00:00:13,650
Hopefully you completed the project as well because it will help solidify all the knowledge that we're

4
00:00:13,650 --> 00:00:19,800
learning into tutorial, because at the end of the day, we can stay in tutorial will for remaining

5
00:00:19,800 --> 00:00:20,560
of the days.

6
00:00:21,000 --> 00:00:27,780
But if you won't know how to apply that knowledge as far as building project, it is going to be somewhat

7
00:00:27,780 --> 00:00:28,330
useless.

8
00:00:28,590 --> 00:00:35,090
So even though it's not mandatory, technically, you can just keep on going through the editorial.

9
00:00:35,400 --> 00:00:44,310
I would suggest every time we are done with some specific tutorial part, just go ahead and do the project

10
00:00:44,520 --> 00:00:50,430
that I'm suggesting, because at the end of the day, if you won't know how to apply them to build a

11
00:00:50,430 --> 00:00:55,040
project, well, then we can sit in tutorial level all day long.

12
00:00:55,050 --> 00:00:58,130
But it's not going to make much sense.

13
00:00:58,530 --> 00:01:03,910
And our second tutorial topic is going to be the second most us talk.

14
00:01:04,350 --> 00:01:09,980
So like I mentioned previously, the U.S. state and use effect are going to be most use talks.

15
00:01:10,260 --> 00:01:17,850
And now we finally arrived at the second hook, the huge effect, an official explanation of use.

16
00:01:17,860 --> 00:01:19,470
The fact hook is following where?

17
00:01:20,350 --> 00:01:28,450
It allows you to do the side effect now before you freak out and frantically start searching for Urban

18
00:01:28,450 --> 00:01:32,270
Dictionary, essentially when we talk about side effects.

19
00:01:32,560 --> 00:01:36,800
We talk about any work outside of the component.

20
00:01:37,270 --> 00:01:44,740
Now, that work could be changing document title that could be signing up for subscription, that could

21
00:01:44,740 --> 00:01:51,070
be fetching data, that could be setting up a event listener and stuff along those lines.

22
00:01:51,370 --> 00:01:57,610
So every time you think of usufruct, think of work outside of the component.

23
00:01:57,910 --> 00:02:00,760
And similarly to our first topic.

24
00:02:01,670 --> 00:02:07,870
Of course, we do have the folder and editorial and we're looking for the second folder name is Usufruct.

25
00:02:08,060 --> 00:02:14,390
And then of course, again, we have the final folder where we have complete code and then we have a

26
00:02:14,390 --> 00:02:21,680
set of folder where we all set up our examples on the file that we're looking for is this use effect

27
00:02:21,680 --> 00:02:22,260
basis.

28
00:02:22,610 --> 00:02:29,480
So what I would want you to do first is in the app Jayesh again, come up with the name My Case.

29
00:02:29,480 --> 00:02:34,370
It's going to be set up just so you know that we are working on a set of folder and then you're looking

30
00:02:34,370 --> 00:02:35,210
for a tutorial.

31
00:02:35,360 --> 00:02:42,460
You're looking for use a fact folder, then the set up and then the filename is one hyphen, usufruct

32
00:02:42,620 --> 00:02:43,610
and No.6.

33
00:02:43,940 --> 00:02:50,180
And once you render the component, you should see in the screen, use the basics.

34
00:02:50,600 --> 00:02:54,260
And once that is done, of course, let's navigate through the file again.

35
00:02:54,260 --> 00:03:01,010
Let me reiterate, it is in tutorial, then usufruct, then set up and then use the fact based Jass.

36
00:03:01,310 --> 00:03:03,020
So that's the file we're looking for.

37
00:03:03,350 --> 00:03:10,430
And just like we use state, we have two ways how we can set up our hook.

38
00:03:10,640 --> 00:03:17,510
We can either imported a notice again, errors, a named import, or remember how we did react, dot

39
00:03:17,510 --> 00:03:18,230
and then use the.

40
00:03:18,740 --> 00:03:20,660
So that is also an option.

41
00:03:21,050 --> 00:03:29,180
Now, by default, use effect runs after every render or each and every time we render component use

42
00:03:29,180 --> 00:03:30,290
effect will run.

43
00:03:30,500 --> 00:03:31,970
So that is going to be by default.

44
00:03:32,270 --> 00:03:37,880
And then there's two more comments that I will cover the clean up function and second parameter, how

45
00:03:37,910 --> 00:03:41,750
it is going to be more important in the later videos.

46
00:03:42,230 --> 00:03:47,900
So first, let's set up, I guess, some kind of year's effect.

47
00:03:48,290 --> 00:03:50,300
So we have our function body again.

48
00:03:50,300 --> 00:03:57,740
We go with user fact and then the way we use the fact works is we pass in the callback function.

49
00:03:58,100 --> 00:03:59,660
So we have user effects.

50
00:03:59,670 --> 00:04:06,650
So that's the hook and line within this callback function, whatever functionality will place will run

51
00:04:06,890 --> 00:04:08,800
after every render.

52
00:04:09,080 --> 00:04:17,780
And just to showcase that, let me go with log and I'll say render component here and then I will log

53
00:04:17,780 --> 00:04:18,380
as well.

54
00:04:18,980 --> 00:04:19,610
Call you.

55
00:04:20,820 --> 00:04:31,440
So I'll go here, call use fact like so I'm online, if will open up the console, what you should see

56
00:04:32,030 --> 00:04:33,590
is a render component.

57
00:04:33,960 --> 00:04:38,840
So we have that and then of course we have the call usufruct.

58
00:04:39,210 --> 00:04:45,030
So as you can see, once we render the component, we also call the usufruct.

59
00:04:45,330 --> 00:04:52,440
Now the reason why you see this render component twice is simply because in the setup in the in the

60
00:04:52,460 --> 00:04:55,290
Chargers, they have these react strict mode.

61
00:04:55,740 --> 00:05:01,890
So if I move this out and if I remove it, you'll see that only once.

62
00:05:02,220 --> 00:05:03,910
So basically that is their setup.

63
00:05:03,930 --> 00:05:06,910
So as you can see now, we have only ORENDER component ones.

64
00:05:07,260 --> 00:05:13,650
So if you're wondering why you see once in a while the render component twice, essentially whatever

65
00:05:13,650 --> 00:05:18,530
we place as far as the function body, it is because of the strict mode.

66
00:05:18,780 --> 00:05:19,110
All right.

67
00:05:19,120 --> 00:05:23,570
So let me close the sidebar right now and let's talk about the effect.

68
00:05:24,000 --> 00:05:26,600
So at the moment, we have only a simple console.

69
00:05:26,820 --> 00:05:31,780
And by the way, yes, even the console log is considered a side effect.

70
00:05:31,980 --> 00:05:34,530
I know it sounds funny, but that is true.

71
00:05:34,860 --> 00:05:40,860
And once we are on the side effect, well, what we would want to do, for example, I would want to

72
00:05:40,860 --> 00:05:46,630
change the title of the document title, The Moment to React.

73
00:05:46,660 --> 00:05:47,890
How can we do that?

74
00:05:47,910 --> 00:05:50,160
Well, let's try it out.

75
00:05:50,190 --> 00:05:55,930
I think I'm going to close the console for now, and I think I'm going to come up with a button.

76
00:05:56,400 --> 00:06:01,790
So in my address, I'll set up a button where essentially we click on a button.

77
00:06:01,830 --> 00:06:10,560
Then we increase the value and then we will set up a new documentary that shows the messages that say

78
00:06:10,800 --> 00:06:11,670
new messages.

79
00:06:11,670 --> 00:06:18,600
And of course, the value will be equal to whatever is the amount of times we clicked on the button.

80
00:06:19,020 --> 00:06:20,130
So here, let's do this.

81
00:06:20,140 --> 00:06:29,760
We will go back to a react fragment and line in here will type out heading one where eventually there's

82
00:06:29,760 --> 00:06:30,600
going to be a value.

83
00:06:32,190 --> 00:06:40,950
And let's go right away, the button class name button, just for styling on click, we will increase

84
00:06:40,950 --> 00:06:41,490
the value.

85
00:06:41,850 --> 00:06:50,610
Of course, we haven't used the used state yet, so let's go here with CONSED and Non-value then set

86
00:06:50,610 --> 00:06:54,920
value function set value not as equal to use state.

87
00:06:55,260 --> 00:06:58,170
And again, we'll start with a zero.

88
00:06:58,560 --> 00:07:04,660
And of course once we click on a button, what I would want is to increase that value by one.

89
00:07:05,190 --> 00:07:12,420
Now I'm not relying on the previous values, so I will just pass in the new value in the set value.

90
00:07:12,880 --> 00:07:15,750
And here let's just right click me.

91
00:07:16,470 --> 00:07:19,070
Click me where we have the button.

92
00:07:19,410 --> 00:07:20,970
So of course now I have the value.

93
00:07:21,000 --> 00:07:26,840
And if you'll notice the moment I click, a couple of things are happening.

94
00:07:27,210 --> 00:07:34,320
So in my console, each and every time I click, I'll have that hereunder component and then I'll have

95
00:07:34,320 --> 00:07:36,380
that call usufruct.

96
00:07:37,200 --> 00:07:40,940
So each and every time we click, this is exactly what is happening.

97
00:07:41,220 --> 00:07:42,150
Why is that happening?

98
00:07:42,160 --> 00:07:48,990
Because every time we click the button, we invoke set value.

99
00:07:49,050 --> 00:07:49,530
Correct.

100
00:07:49,950 --> 00:07:54,210
Now, what happened with the USA, USA?

101
00:07:54,210 --> 00:08:02,240
Did you think it preserved the value between the Rangers and the second one it triggered or you render?

102
00:08:02,490 --> 00:08:10,770
So every time I click on a button, I'm essentially running my use of it because remember, by default,

103
00:08:11,190 --> 00:08:15,450
you use the fact we'll run after every render.

104
00:08:15,660 --> 00:08:19,050
So each and every time we render the component we are running.

105
00:08:19,050 --> 00:08:21,510
Essentially this used a fact hook.

106
00:08:21,730 --> 00:08:27,280
That's what in a console we can see call use if I call you call usufruct.

107
00:08:27,630 --> 00:08:34,230
Now, of course, let's do some more interesting side effect where not only I would want to log, but

108
00:08:34,230 --> 00:08:35,790
I want to go with document.

109
00:08:36,640 --> 00:08:44,170
And then title, and that is going to be called to a template string and I'll new messages, and in

110
00:08:44,170 --> 00:08:51,520
this case I'm going to use parentheses than I would want to grab my state value, and which you'll notice

111
00:08:51,820 --> 00:08:57,040
that the moment we render the component, of course, we call the use fact.

112
00:08:57,040 --> 00:08:58,230
We can see that in console.

113
00:08:58,600 --> 00:09:04,540
But I can also see it here where I have the new messages, I have new messages, and now I'm using my

114
00:09:04,540 --> 00:09:06,870
state value, which of course is zero.

115
00:09:07,210 --> 00:09:14,980
But now every time we click notice how we're updating the value here, we're calling the use fact after

116
00:09:14,980 --> 00:09:15,790
every render.

117
00:09:15,940 --> 00:09:22,740
And of course, the functionality that is within the use effect also runs because now I have documental

118
00:09:23,060 --> 00:09:28,270
and now new messages is three, four and each and every time I increase.

119
00:09:28,510 --> 00:09:31,810
Also my title changes as well.

120
00:09:32,140 --> 00:09:40,000
Now, again, just to reiterate use a fact is used when we want to set up side-Effect, and that is

121
00:09:40,000 --> 00:09:42,990
some work outside of the component.

122
00:09:43,510 --> 00:09:51,100
So think data fettering, think listening for events, think signing up for subscriptions and stuff

123
00:09:51,100 --> 00:09:57,700
along those lines and then by default it will run after every orender.

124
00:09:57,940 --> 00:10:04,300
And the way it works, we pass in the callback function and then whatever functionality we set up within

125
00:10:04,300 --> 00:10:08,950
that operation will run after every render.