Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
12287
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.