Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,300 --> 00:00:04,033
Tutor: So now we learned about State.
2
00:00:04,033 --> 00:00:06,400
And State as you can probably tell by now
3
00:00:06,400 --> 00:00:08,966
is a key concept in React.
4
00:00:08,966 --> 00:00:10,733
Now, there are a couple of things
5
00:00:10,733 --> 00:00:12,933
I wanna clarify about useState
6
00:00:12,933 --> 00:00:16,633
and about why we use a const here, for example.
7
00:00:16,633 --> 00:00:19,300
Now, first let's start with one important thing,
8
00:00:19,300 --> 00:00:21,500
which I did mention in the last lecture already.
9
00:00:21,500 --> 00:00:25,166
UseState registers some State,
10
00:00:25,166 --> 00:00:27,633
so some value as a State
11
00:00:27,633 --> 00:00:30,933
for the component in which it is being called.
12
00:00:30,933 --> 00:00:34,066
And I wanna be even more precise here.
13
00:00:34,066 --> 00:00:38,433
It registers it for a specific component instance.
14
00:00:38,433 --> 00:00:40,566
For example, ExpenseItem here
15
00:00:40,566 --> 00:00:43,433
is being used four times, right?
16
00:00:43,433 --> 00:00:47,966
And Expenses.js we have four ExpenseItems.
17
00:00:47,966 --> 00:00:52,233
Now, every item receives its own separate State
18
00:00:52,233 --> 00:00:55,300
which is detached from the other States.
19
00:00:55,300 --> 00:00:55,766
which is detached from the other States.
20
00:00:55,766 --> 00:00:58,466
We have one ExpenseItem definition here,
21
00:00:58,466 --> 00:01:02,400
but then this function is basically called four times
22
00:01:02,400 --> 00:01:05,300
when we create four ExpenseItems.
23
00:01:05,300 --> 00:01:05,733
when we create four ExpenseItems.
24
00:01:05,733 --> 00:01:10,333
And every time it's called, a new separate State is created
25
00:01:10,333 --> 00:01:11,966
of course in the same way
26
00:01:11,966 --> 00:01:16,000
but managed independently by React.
27
00:01:16,000 --> 00:01:16,433
but managed independently by React.
28
00:01:16,433 --> 00:01:18,333
So if we change the title
29
00:01:18,333 --> 00:01:22,500
in the first ExpenseItem
30
00:01:22,500 --> 00:01:24,466
the other ones are not affected
31
00:01:24,466 --> 00:01:26,900
because they have their own State.
32
00:01:26,900 --> 00:01:28,100
That's really important.
33
00:01:28,100 --> 00:01:32,433
It's on a per component instance basis.
34
00:01:32,433 --> 00:01:32,700
It's on a per component instance basis.
35
00:01:32,700 --> 00:01:34,633
So we have separate States,
36
00:01:34,633 --> 00:01:38,566
even if we create a component more than once.
37
00:01:38,566 --> 00:01:38,666
even if we create a component more than once.
38
00:01:38,666 --> 00:01:40,566
And that's of course crucial
39
00:01:40,566 --> 00:01:43,766
because it would be a rather undesired behavior
40
00:01:43,766 --> 00:01:46,500
if we change something in one item
41
00:01:46,500 --> 00:01:49,633
and all the other items are updated as well.
42
00:01:49,633 --> 00:01:53,766
So that's a good thing to have.
43
00:01:53,766 --> 00:01:56,900
Now, in addition, whenever State changes
44
00:01:56,900 --> 00:01:59,100
because we click a button in this case
45
00:01:59,100 --> 00:02:01,433
it's only this component function
46
00:02:01,433 --> 00:02:03,900
and only that specific instance
47
00:02:03,900 --> 00:02:06,100
where this component is being used
48
00:02:06,100 --> 00:02:09,466
where React will re-evaluate it.
49
00:02:09,466 --> 00:02:09,966
where React will re-evaluate it.
50
00:02:09,966 --> 00:02:12,166
And you can tell that this is the fact
51
00:02:12,166 --> 00:02:15,566
if you add a number of console.log here
52
00:02:15,566 --> 00:02:17,600
in the component, function itself,
53
00:02:17,600 --> 00:02:18,033
in the component, function itself,
54
00:02:18,033 --> 00:02:25,066
where you say ExpenseItem evaluated by React.
55
00:02:25,066 --> 00:02:27,666
This will be called whenever the ExpenseItem
56
00:02:27,666 --> 00:02:31,266
component function is being executed.
57
00:02:31,266 --> 00:02:31,800
component function is being executed.
58
00:02:31,800 --> 00:02:36,266
And therefore if I reload, we see it's called four times
59
00:02:36,266 --> 00:02:36,833
And therefore if I reload, we see it's called four times
60
00:02:36,833 --> 00:02:38,033
which makes a lot of sense
61
00:02:38,033 --> 00:02:42,533
because we're using ExpenseItem four times in expenses.
62
00:02:42,533 --> 00:02:42,666
because we're using ExpenseItem four times in expenses.
63
00:02:42,666 --> 00:02:44,766
So four separate instances
64
00:02:44,766 --> 00:02:48,466
of this component are being created.
65
00:02:48,466 --> 00:02:50,733
But if I now click on change title
66
00:02:50,733 --> 00:02:52,933
in one of the ExpenseItems,
67
00:02:52,933 --> 00:02:55,600
we see it's only printed once.
68
00:02:55,600 --> 00:02:56,966
Which is basically happening
69
00:02:56,966 --> 00:02:59,133
because of what I just explained.
70
00:02:59,133 --> 00:03:02,433
Only that specific instance is being updated
71
00:03:02,433 --> 00:03:04,833
and therefore for being re-evaluated,
72
00:03:04,833 --> 00:03:04,933
and therefore for being re-evaluated,
73
00:03:04,933 --> 00:03:08,000
and the other instances are not affected
74
00:03:08,000 --> 00:03:10,433
by that State change.
75
00:03:10,433 --> 00:03:12,233
And that's important to keep in mind
76
00:03:12,233 --> 00:03:14,666
that State really is separated
77
00:03:14,666 --> 00:03:18,700
on a per component instance basis.
78
00:03:18,700 --> 00:03:21,500
Now there's one other thing which could be confusing.
79
00:03:21,500 --> 00:03:24,633
And that's the fact that I'm using const here.
80
00:03:24,633 --> 00:03:26,766
Why am I using const here
81
00:03:26,766 --> 00:03:31,133
when we do eventually assign a new value?
82
00:03:31,133 --> 00:03:32,633
Well, keep in mind
83
00:03:32,633 --> 00:03:35,733
that we're not assigning a value with the equal sign.
84
00:03:35,733 --> 00:03:37,433
That would indeed fail
85
00:03:37,433 --> 00:03:40,266
but that is not how we assign a new value
86
00:03:40,266 --> 00:03:42,166
when we update a State.
87
00:03:42,166 --> 00:03:42,500
when we update a State.
88
00:03:42,500 --> 00:03:45,533
Instead we call this State updating function,
89
00:03:45,533 --> 00:03:49,833
and the concrete value is simply managed somewhere else
90
00:03:49,833 --> 00:03:51,033
by React.
91
00:03:51,033 --> 00:03:54,033
By calling useState we tell React
92
00:03:54,033 --> 00:03:56,600
that it should manage some value for us.
93
00:03:56,600 --> 00:04:00,633
We never see that variable itself.
94
00:04:00,633 --> 00:04:03,300
So therefore, we just call a function
95
00:04:03,300 --> 00:04:03,366
So therefore, we just call a function
96
00:04:03,366 --> 00:04:06,200
and we never assign a new value to title
97
00:04:06,200 --> 00:04:08,700
with the equal operator.
98
00:04:08,700 --> 00:04:08,833
with the equal operator.
99
00:04:08,833 --> 00:04:12,766
And therefore, using a const is absolutely fine.
100
00:04:12,766 --> 00:04:16,100
How do we get the latest title value then though?
101
00:04:16,100 --> 00:04:18,433
Well, keep in mind that the component function
102
00:04:18,433 --> 00:04:21,333
is re-executed when the State is updated.
103
00:04:21,333 --> 00:04:21,399
is re-executed when the State is updated.
104
00:04:21,399 --> 00:04:23,766
And therefore, of course, this line of code,
105
00:04:23,766 --> 00:04:26,900
line nine, also is executed again
106
00:04:26,900 --> 00:04:30,800
whenever the component function is executed again.
107
00:04:30,800 --> 00:04:33,233
So if we called setTitle
108
00:04:33,233 --> 00:04:35,266
and we assign a new title,
109
00:04:35,266 --> 00:04:38,500
that leads to this component being called again
110
00:04:38,500 --> 00:04:38,733
that leads to this component being called again
111
00:04:38,733 --> 00:04:43,733
and therefore, this new title, this updated title
112
00:04:43,733 --> 00:04:46,533
is fetched from React, which manages the State for us.
113
00:04:46,533 --> 00:04:48,900
is fetched from React, which manages the State for us.
114
00:04:48,900 --> 00:04:50,533
Basically we go to React
115
00:04:50,533 --> 00:04:54,500
and say, "Hey please give me that latest title State
116
00:04:54,500 --> 00:04:57,000
which I told you to manage for me."
117
00:04:57,000 --> 00:05:00,866
And React provides us this latest State in this array
118
00:05:00,866 --> 00:05:04,066
which useState always returns.
119
00:05:04,066 --> 00:05:04,600
which useState always returns.
120
00:05:04,600 --> 00:05:07,500
So we always get a brand new snapshot
121
00:05:07,500 --> 00:05:12,000
of that State when this component function re-executes.
122
00:05:12,000 --> 00:05:15,800
That's how this works under the hood.
123
00:05:15,800 --> 00:05:18,500
Now you might be wondering if that doesn't mean
124
00:05:18,500 --> 00:05:21,900
that we always overwrite any State changes
125
00:05:21,900 --> 00:05:24,400
with props.title again, here.
126
00:05:24,400 --> 00:05:24,600
with props.title again, here.
127
00:05:24,600 --> 00:05:28,133
And here, the special thing is that React keeps track
128
00:05:28,133 --> 00:05:31,866
of when we call useState in a given component instance
129
00:05:31,866 --> 00:05:33,833
for the first time.
130
00:05:33,833 --> 00:05:36,633
And when we call it for the first time ever,
131
00:05:36,633 --> 00:05:39,600
it'll take that argument as an initial value.
132
00:05:39,600 --> 00:05:39,833
it'll take that argument as an initial value.
133
00:05:39,833 --> 00:05:42,900
But if a component is then re-executed
134
00:05:42,900 --> 00:05:45,666
because of such a State change, for example,
135
00:05:45,666 --> 00:05:49,266
React will not reinitialize the State.
136
00:05:49,266 --> 00:05:53,066
Instead, it will detect that this State had been initialized
137
00:05:53,066 --> 00:05:56,533
in the past, and it will just grab the latest State
138
00:05:56,533 --> 00:05:59,166
which is based on some State update, for example,
139
00:05:59,166 --> 00:06:02,233
and give us that State instead.
140
00:06:02,233 --> 00:06:02,533
and give us that State instead.
141
00:06:02,533 --> 00:06:05,900
So this initial value is really only considered
142
00:06:05,900 --> 00:06:08,633
when this component function is being executed
143
00:06:08,633 --> 00:06:13,333
for the first time, for a given component instance.
144
00:06:13,333 --> 00:06:16,966
And I know that this is a lot of knowledge about State
145
00:06:16,966 --> 00:06:20,033
and it might be confusing to a certain extent.
146
00:06:20,033 --> 00:06:20,366
and it might be confusing to a certain extent.
147
00:06:20,366 --> 00:06:21,933
It is just important
148
00:06:21,933 --> 00:06:24,766
to understand how State works under the hood,
149
00:06:24,766 --> 00:06:27,833
because if you're don't fully understand that
150
00:06:27,833 --> 00:06:29,700
then you will run into problems
151
00:06:29,700 --> 00:06:32,166
in more complex React applications
152
00:06:32,166 --> 00:06:32,366
in more complex React applications
153
00:06:32,366 --> 00:06:35,766
where suddenly some value isn't updated
154
00:06:35,766 --> 00:06:37,766
as you expected it to be.
155
00:06:37,766 --> 00:06:41,033
That's why I'm explaining this in great detail.
156
00:06:41,033 --> 00:06:44,800
In a nutshell, using State is simple though.
157
00:06:44,800 --> 00:06:44,866
In a nutshell, using State is simple though.
158
00:06:44,866 --> 00:06:47,700
You just register State with useState,
159
00:06:47,700 --> 00:06:50,466
you always get back two values;
160
00:06:50,466 --> 00:06:50,633
you always get back two values;
161
00:06:50,633 --> 00:06:53,500
the value itself and the updating function.
162
00:06:53,500 --> 00:06:55,333
You call the updating function
163
00:06:55,333 --> 00:06:57,800
whenever the State should change,
164
00:06:57,800 --> 00:06:58,166
whenever the State should change,
165
00:06:58,166 --> 00:07:00,033
and you use that first element
166
00:07:00,033 --> 00:07:02,233
whenever you wanna use the State value,
167
00:07:02,233 --> 00:07:05,633
like here for outputting it in the JSX code.
168
00:07:05,633 --> 00:07:07,300
And React, will do the rest
169
00:07:07,300 --> 00:07:10,400
and it will re-execute the component function
170
00:07:10,400 --> 00:07:13,700
and re-evaluate the JSX code therefore;
171
00:07:13,700 --> 00:07:15,933
whenever the State changes.
172
00:07:15,933 --> 00:07:19,166
That's State and that's an important concept
173
00:07:19,166 --> 00:07:23,833
because it's State which adds reactivity to our application.
174
00:07:23,833 --> 00:07:28,266
Without State, our user interface would never change.
175
00:07:28,266 --> 00:07:28,433
Without State, our user interface would never change.
176
00:07:28,433 --> 00:07:32,433
But with State and with listening to events,
177
00:07:32,433 --> 00:07:35,933
we can make sure that we can react to user input
178
00:07:35,933 --> 00:07:38,433
and that such input can result
179
00:07:38,433 --> 00:07:41,733
in a visible change on our screen.
180
00:07:41,733 --> 00:07:44,633
So State is a super important concept
181
00:07:44,633 --> 00:07:47,300
and of course being able to listen to user events
182
00:07:47,300 --> 00:07:49,333
is also important as you can tell.
14171
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.