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