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