Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:05,070
State is actually not a React specific concept
2
00:00:05,070 --> 00:00:08,080
but it is a key concept in React as well.
3
00:00:08,080 --> 00:00:09,830
And here in ExpenseItem,
4
00:00:09,830 --> 00:00:12,650
we have a scenario where we wanna use
5
00:00:12,650 --> 00:00:15,440
that built-in state concept.
6
00:00:15,440 --> 00:00:17,050
Because this title here
7
00:00:17,050 --> 00:00:19,970
which changes when the clickHandler executes
8
00:00:19,970 --> 00:00:23,670
is actually data that should result
9
00:00:23,670 --> 00:00:27,100
in this component being re-evaluated
10
00:00:27,100 --> 00:00:31,050
and re-drawn on the screen when it's changes,
11
00:00:31,050 --> 00:00:33,083
when that's title data changes.
12
00:00:34,280 --> 00:00:38,200
And by default, regular variables like this one,
13
00:00:38,200 --> 00:00:42,350
are not triggering such a re-evaluation.
14
00:00:42,350 --> 00:00:44,530
React doesn't care about that.
15
00:00:44,530 --> 00:00:47,430
If you have a variable in your component function
16
00:00:47,430 --> 00:00:51,060
and the that variable changes, React ignores it.
17
00:00:51,060 --> 00:00:54,580
It doesn't care about that, that code executes, sure,
18
00:00:54,580 --> 00:00:57,910
but the overall component function doesn't execute again
19
00:00:57,910 --> 00:01:00,840
just because some variable changed.
20
00:01:00,840 --> 00:01:04,200
And as a side note, even if it would execute again,
21
00:01:04,200 --> 00:01:06,460
of course then title, this variable,
22
00:01:06,460 --> 00:01:08,470
would all just be retreated
23
00:01:08,470 --> 00:01:11,350
and re initialized to the props value.
24
00:01:11,350 --> 00:01:13,690
Because as part of this component function
25
00:01:13,690 --> 00:01:16,690
we are creating this title variable.
26
00:01:16,690 --> 00:01:18,180
So even if that would happen
27
00:01:18,180 --> 00:01:20,520
we wouldn't reach the desired result
28
00:01:20,520 --> 00:01:22,370
but we don't even need to think about that
29
00:01:22,370 --> 00:01:24,020
because it is not happening.
30
00:01:24,020 --> 00:01:26,870
This ExpenseItem component function currently
31
00:01:26,870 --> 00:01:30,890
is not called a second time after the initial rendering
32
00:01:30,890 --> 00:01:32,650
just because a click occurred
33
00:01:32,650 --> 00:01:34,420
or because a variable changed
34
00:01:34,420 --> 00:01:37,783
does not trigger this component function to run again.
35
00:01:39,400 --> 00:01:42,500
So to tell React that it should run it again,
36
00:01:42,500 --> 00:01:46,590
we need to import something from the React library.
37
00:01:46,590 --> 00:01:50,490
And we do it as by adding a so-called named import.
38
00:01:50,490 --> 00:01:53,510
This here, is the default import.
39
00:01:53,510 --> 00:01:54,790
Now, we can add a comma
40
00:01:54,790 --> 00:01:58,170
and curly braces and between the curly braces
41
00:01:58,170 --> 00:02:02,030
we can now extract specifically named things
42
00:02:02,030 --> 00:02:04,210
from the React library.
43
00:02:04,210 --> 00:02:06,860
Here we imported the overall React object,
44
00:02:06,860 --> 00:02:11,690
now we want to import single pieces from the React library.
45
00:02:11,690 --> 00:02:14,930
And we want to import a function here,
46
00:02:14,930 --> 00:02:17,293
a function which is called useState.
47
00:02:19,520 --> 00:02:22,580
This is a function provided by the React library
48
00:02:22,580 --> 00:02:26,530
and this function allows us to define values
49
00:02:26,530 --> 00:02:31,530
as state where changes to these values should reflect
50
00:02:32,070 --> 00:02:34,500
in the component function being called again,
51
00:02:34,500 --> 00:02:36,030
which is a key difference
52
00:02:36,030 --> 00:02:39,120
to the regular variable we're using here.
53
00:02:39,120 --> 00:02:42,310
Now, how do we use this useState function though?
54
00:02:42,310 --> 00:02:44,020
Well, it's very simple.
55
00:02:44,020 --> 00:02:47,660
Inside of our component function and that's important,
56
00:02:47,660 --> 00:02:50,580
we have to do that inside of this function.
57
00:02:50,580 --> 00:02:52,483
We just call useState.
58
00:02:53,546 --> 00:02:57,280
And useState is a so-called React hook.
59
00:02:57,280 --> 00:02:59,530
There are other hooks as well,
60
00:02:59,530 --> 00:03:01,040
and of course we are going to learn
61
00:03:01,040 --> 00:03:03,430
about all important hooks for all at this course
62
00:03:03,430 --> 00:03:06,250
but that is one of the most important ones.
63
00:03:06,250 --> 00:03:09,360
And all these React hooks can be recognized
64
00:03:09,360 --> 00:03:12,500
by the fact that they start with the word "use"
65
00:03:12,500 --> 00:03:13,600
in their name,
66
00:03:13,600 --> 00:03:17,370
and all these hooks must only be called
67
00:03:17,370 --> 00:03:21,430
inside of React component functions like ExpenseItem.
68
00:03:21,430 --> 00:03:26,320
They can't be called outside of these functions, like this.
69
00:03:26,320 --> 00:03:28,030
And they all just shouldn't be called
70
00:03:28,030 --> 00:03:29,750
in any nested functions.
71
00:03:29,750 --> 00:03:31,920
They must be called directly
72
00:03:31,920 --> 00:03:34,500
inside such component functions.
73
00:03:34,500 --> 00:03:36,780
There is one exception which we'll talk about later
74
00:03:36,780 --> 00:03:39,630
but for the moment, that is what you should keep in mind.
75
00:03:41,090 --> 00:03:44,230
Now, useState doesn't work just like that.
76
00:03:44,230 --> 00:03:48,570
Instead, useState once a default state value,
77
00:03:48,570 --> 00:03:50,620
because with useState
78
00:03:50,620 --> 00:03:54,220
we basically create a special kind of variable,
79
00:03:54,220 --> 00:03:55,470
you could say,
80
00:03:55,470 --> 00:03:58,350
a variable where changes will lead
81
00:03:58,350 --> 00:04:00,850
this component function to be called again.
82
00:04:00,850 --> 00:04:04,140
And of course we can therefore assign an initial value
83
00:04:04,140 --> 00:04:06,150
for that special variable,
84
00:04:06,150 --> 00:04:08,590
just as we're assigning a value here
85
00:04:08,590 --> 00:04:11,470
for does regular variable.
86
00:04:11,470 --> 00:04:15,000
So here, my initial value is props.title.
87
00:04:15,000 --> 00:04:18,533
And we simply pass this as an argument to useState.
88
00:04:19,700 --> 00:04:22,900
Now does special variable is created.
89
00:04:22,900 --> 00:04:26,060
Of course, we also want to be able to use that variable,
90
00:04:26,060 --> 00:04:29,040
we want to be able to use it down here, for example
91
00:04:29,040 --> 00:04:33,120
and therefore useState also returns something.
92
00:04:33,120 --> 00:04:36,840
It gives us access to this special variable.
93
00:04:36,840 --> 00:04:39,640
However, it does not just return that,
94
00:04:39,640 --> 00:04:43,920
it also returns a function which we can then call
95
00:04:43,920 --> 00:04:46,963
to assign a new value to that variable.
96
00:04:48,120 --> 00:04:50,690
So we'll not be assigning values like this
97
00:04:50,690 --> 00:04:52,060
with the equal sign,
98
00:04:52,060 --> 00:04:54,920
instead, we will be assigning new values
99
00:04:54,920 --> 00:04:56,350
by calling a function.
100
00:04:56,350 --> 00:05:01,090
That's just how this state variable thing works.
101
00:05:01,090 --> 00:05:04,870
And for that useState actually returns an array
102
00:05:04,870 --> 00:05:09,540
where the first value is the variable itself,
103
00:05:09,540 --> 00:05:12,070
you could say, the value itself.
104
00:05:12,070 --> 00:05:14,220
And the second element in the array
105
00:05:14,220 --> 00:05:16,740
is that updating function.
106
00:05:16,740 --> 00:05:19,890
And we can use a modern JavaScript feature
107
00:05:19,890 --> 00:05:23,720
called array destructuring, which looks like this,
108
00:05:23,720 --> 00:05:27,010
to store both elements in separate variables
109
00:05:27,010 --> 00:05:30,280
or constants, and here I'll use constants.
110
00:05:30,280 --> 00:05:33,483
And I'll come back to why it's a constant in a second.
111
00:05:34,330 --> 00:05:36,640
Now you can choose any names of your choice
112
00:05:36,640 --> 00:05:39,890
because for a radius structuring, it's just your order
113
00:05:39,890 --> 00:05:43,813
which matters and all named as title and setTitle.
114
00:05:45,204 --> 00:05:47,890
The first element, as I just said,
115
00:05:47,890 --> 00:05:51,110
is a point at that managed value.
116
00:05:51,110 --> 00:05:54,700
So initially at props title, the value stored
117
00:05:54,700 --> 00:05:56,120
in props title,
118
00:05:56,120 --> 00:05:57,970
and the second element here
119
00:05:57,970 --> 00:06:01,720
is a function which we can later call to set a new title,
120
00:06:01,720 --> 00:06:04,310
hence this name, which I chose.
121
00:06:04,310 --> 00:06:06,380
Both names are up to you,
122
00:06:06,380 --> 00:06:09,000
but the convention is to use something
123
00:06:09,000 --> 00:06:10,720
which describes the value
124
00:06:10,720 --> 00:06:14,440
as a name for this first element, since that is the value
125
00:06:14,440 --> 00:06:18,140
and then set, and then that name repeated
126
00:06:18,140 --> 00:06:20,400
just with a capital starting character here.
127
00:06:20,400 --> 00:06:24,740
This capital T for that function which updates the value.
128
00:06:24,740 --> 00:06:25,810
That's the convention
129
00:06:25,810 --> 00:06:29,473
on how you name these two elements returned by useState.
130
00:06:30,665 --> 00:06:35,480
And useState, this hook, always returns an array
131
00:06:35,480 --> 00:06:37,710
with exactly two elements.
132
00:06:37,710 --> 00:06:39,400
That's always the case.
133
00:06:39,400 --> 00:06:41,360
And it's always the case
134
00:06:41,360 --> 00:06:45,720
that the first element is the current state value.
135
00:06:45,720 --> 00:06:49,860
And the second element is a function for updating that.
136
00:06:49,860 --> 00:06:52,880
Now with that, we can remove that title variable
137
00:06:52,880 --> 00:06:56,350
and we can also remove that value assignment
138
00:06:56,350 --> 00:06:57,483
in clickHandler.
139
00:06:58,640 --> 00:07:02,423
And we can still use title like this down there in JSX.
140
00:07:03,550 --> 00:07:05,790
So if we now save it like this,
141
00:07:05,790 --> 00:07:08,060
we still see toilet paper here.
142
00:07:08,060 --> 00:07:10,110
So that hasn't changed,
143
00:07:10,110 --> 00:07:12,510
but of course the button still doesn't do anything
144
00:07:12,510 --> 00:07:16,240
because at the moment we're never updating this.
145
00:07:16,240 --> 00:07:20,035
Now, as I said, with the value returned by useState,
146
00:07:20,035 --> 00:07:23,560
we're not going to assign a new value with an equal sign.
147
00:07:23,560 --> 00:07:28,090
Instead, we assign a new value by calling setTitle.
148
00:07:28,090 --> 00:07:31,280
So by calling this state updating function
149
00:07:32,430 --> 00:07:35,180
and then we just passed a new value
150
00:07:35,180 --> 00:07:37,933
as argument, in this case updated.
151
00:07:39,270 --> 00:07:41,210
Now, why does it work like this though?
152
00:07:41,210 --> 00:07:44,220
Why do we have this state updating function
153
00:07:44,220 --> 00:07:46,733
instead of assigning a new value like this?
154
00:07:47,690 --> 00:07:50,670
The reason for that is, that calling this function
155
00:07:50,670 --> 00:07:55,090
does not just assign a new value to some variable,
156
00:07:55,090 --> 00:07:58,950
but that instead it is a special variable to begin with.
157
00:07:58,950 --> 00:08:02,230
It's managed by React somewhere in memory.
158
00:08:02,230 --> 00:08:05,300
And when we call this state updating function,
159
00:08:05,300 --> 00:08:10,090
this special variable will not just receive a new value
160
00:08:10,090 --> 00:08:12,370
but, and that's important,
161
00:08:12,370 --> 00:08:15,550
the component function in which you called
162
00:08:15,550 --> 00:08:17,440
this state updating function.
163
00:08:17,440 --> 00:08:20,590
And in which you initialized your state with useState
164
00:08:21,760 --> 00:08:23,323
will be executed again.
165
00:08:24,250 --> 00:08:26,570
And that is exactly what we need.
166
00:08:26,570 --> 00:08:29,720
We want to call this component function again
167
00:08:29,720 --> 00:08:32,090
when our state changes.
168
00:08:32,090 --> 00:08:34,870
And by calling this state updating function
169
00:08:34,870 --> 00:08:36,429
that's happening.
170
00:08:36,429 --> 00:08:38,159
Because by calling this function,
171
00:08:38,159 --> 00:08:41,880
you're telling React that you wanna assign a new value
172
00:08:41,880 --> 00:08:43,240
to this state.
173
00:08:43,240 --> 00:08:45,790
And that then also tells React
174
00:08:45,790 --> 00:08:49,560
that the component in which this staid was registered
175
00:08:49,560 --> 00:08:53,920
with useState should be re-evaluated.
176
00:08:53,920 --> 00:08:56,060
And therefore React will go ahead
177
00:08:56,060 --> 00:08:58,680
and execute this component function again,
178
00:08:58,680 --> 00:09:03,620
and therefore also evaluate this JSX code again.
179
00:09:03,620 --> 00:09:07,710
And then it will draw any changes which it's detects
180
00:09:07,710 --> 00:09:12,710
compared to the last time it evaluated this onto the screen.
181
00:09:12,760 --> 00:09:14,700
So if we now save everything,
182
00:09:14,700 --> 00:09:16,370
if I click Change Title,
183
00:09:16,370 --> 00:09:19,150
you see the title changes to updated
184
00:09:19,150 --> 00:09:22,600
for the ExpenseItem in which we're doing this.
185
00:09:22,600 --> 00:09:25,423
And that's now how this works.
186
00:09:27,070 --> 00:09:29,720
Now you will notice that these console locks
187
00:09:29,720 --> 00:09:33,470
still show the title before it was updated.
188
00:09:33,470 --> 00:09:35,613
The reason for this is that calling
189
00:09:35,613 --> 00:09:37,670
this state updating function
190
00:09:37,670 --> 00:09:40,540
actually doesn't change the value right away,
191
00:09:40,540 --> 00:09:44,330
but instead schedules this state update.
192
00:09:44,330 --> 00:09:46,390
So in the very next line thereafter,
193
00:09:46,390 --> 00:09:49,240
this new value isn't available yet.
194
00:09:49,240 --> 00:09:51,610
That's why we see the old value being locked
195
00:09:51,610 --> 00:09:54,900
even though we updated it before logging.
196
00:09:54,900 --> 00:09:56,170
But you do see
197
00:09:56,170 --> 00:09:59,180
that eventually this component is called again
198
00:09:59,180 --> 00:10:00,980
and is evaluated again.
199
00:10:00,980 --> 00:10:05,980
And that therefore we see our updated value on the screen.
200
00:10:06,120 --> 00:10:08,330
That's how React state works.
201
00:10:08,330 --> 00:10:12,170
And this is another key concept in React.
202
00:10:12,170 --> 00:10:15,380
If you have data, which might change,
203
00:10:15,380 --> 00:10:18,560
and where changes to that data should be reflected
204
00:10:18,560 --> 00:10:20,370
on the user interface
205
00:10:20,370 --> 00:10:22,900
then you need state
206
00:10:22,900 --> 00:10:25,980
because a regular variables will not do the trick
207
00:10:25,980 --> 00:10:30,050
with state, however you can set and change values.
208
00:10:30,050 --> 00:10:31,510
And when they do change,
209
00:10:31,510 --> 00:10:34,220
React will re-evaluate the component
210
00:10:34,220 --> 00:10:36,400
in which the state was registered.
211
00:10:36,400 --> 00:10:39,010
And only that component, by the way
212
00:10:39,010 --> 00:10:40,820
not any other components,
213
00:10:40,820 --> 00:10:45,270
just this component in which this state was registered.
214
00:10:45,270 --> 00:10:47,070
Now let's take a closer look
215
00:10:47,070 --> 00:10:49,380
at the state and why we use const.
216
00:10:49,380 --> 00:10:51,563
And how does all works in detail.
17009
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.