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,490
We know how React manages state,
2
00:00:04,490 --> 00:00:06,300
or at least we have an idea.
3
00:00:06,300 --> 00:00:08,029
But there's one thing which is important,
4
00:00:08,029 --> 00:00:09,690
which I mentioned before,
5
00:00:09,690 --> 00:00:11,450
but which I now wanna emphasize again.
6
00:00:11,450 --> 00:00:15,300
And that is how React handles state updates.
7
00:00:15,300 --> 00:00:18,060
In your code, you might have a component
8
00:00:18,060 --> 00:00:20,660
and in that component, you might manage some state
9
00:00:20,660 --> 00:00:22,770
with the help of the useState hook,
10
00:00:22,770 --> 00:00:26,290
and therefore React manages that state for you.
11
00:00:26,290 --> 00:00:27,630
Let's say the initial state
12
00:00:27,630 --> 00:00:30,570
for this product component is DVD.
13
00:00:30,570 --> 00:00:32,593
So we have a DVD as a product here.
14
00:00:34,830 --> 00:00:38,900
Now eventually, because a user clicked a button or whatever,
15
00:00:38,900 --> 00:00:42,130
in that component we update that state.
16
00:00:42,130 --> 00:00:44,270
For example, with SetNewProduct,
17
00:00:44,270 --> 00:00:46,580
that could be our state updating function
18
00:00:46,580 --> 00:00:48,450
returned by the useState hook
19
00:00:48,450 --> 00:00:52,943
and we set the new product to book, so from DVD to book.
20
00:00:53,930 --> 00:00:58,930
Now what happens with that is not that DVD is instantly
21
00:00:59,177 --> 00:01:03,830
after SetNewProduct finishes execution is replaced.
22
00:01:03,830 --> 00:01:05,700
DVD is not instantly replaced
23
00:01:05,700 --> 00:01:08,870
just because SetNewProduct is done running.
24
00:01:08,870 --> 00:01:11,460
Instead, calling SetNewProduct,
25
00:01:11,460 --> 00:01:15,240
and calling those state updating functions in general
26
00:01:15,240 --> 00:01:19,393
schedules a state update with the data book.
27
00:01:20,310 --> 00:01:23,560
But that's now a scheduled state change,
28
00:01:23,560 --> 00:01:27,220
React is aware of it, React plans on processing it,
29
00:01:27,220 --> 00:01:30,600
React doesn't process that immediately though.
30
00:01:30,600 --> 00:01:34,260
Now in reality most of the time, state changes,
31
00:01:34,260 --> 00:01:38,690
scheduled state changes will be processed very fast,
32
00:01:38,690 --> 00:01:39,930
pretty much instantly.
33
00:01:39,930 --> 00:01:42,850
So in reality, it might feel instant.
34
00:01:42,850 --> 00:01:46,230
If we click a button and dad removes a paragraph
35
00:01:46,230 --> 00:01:49,770
to us as a human, that happens instantly.
36
00:01:49,770 --> 00:01:51,560
But React reserves the right
37
00:01:51,560 --> 00:01:54,120
of actually postponing that state change.
38
00:01:54,120 --> 00:01:54,953
For example,
39
00:01:54,953 --> 00:01:57,770
because a lot of other performance intensive tasks
40
00:01:57,770 --> 00:01:59,570
are going on at the same moment,
41
00:01:59,570 --> 00:02:01,380
potentially it asks that,
42
00:02:01,380 --> 00:02:04,720
React considers to have a higher priority.
43
00:02:04,720 --> 00:02:07,210
Let's say on your screen, you have a input field
44
00:02:07,210 --> 00:02:09,590
where the user is able to type something.
45
00:02:09,590 --> 00:02:13,530
Reacting to that user input would have a higher priority
46
00:02:13,530 --> 00:02:16,440
than changing some text on the screen.
47
00:02:16,440 --> 00:02:17,930
And for reasons like that,
48
00:02:17,930 --> 00:02:22,070
React might postpone scheduled state changes.
49
00:02:22,070 --> 00:02:23,810
Now, what React does is,
50
00:02:23,810 --> 00:02:26,890
it guarantees you that the order of state changes
51
00:02:26,890 --> 00:02:30,460
for one in the same type of state is guaranteed.
52
00:02:30,460 --> 00:02:32,630
So if we call set new product again
53
00:02:32,630 --> 00:02:36,510
and we set this to, let's say, carpet or whatever,
54
00:02:36,510 --> 00:02:40,380
then this state change would not be performed
55
00:02:40,380 --> 00:02:41,860
before the previous state change.
56
00:02:41,860 --> 00:02:43,480
So the order is kept,
57
00:02:43,480 --> 00:02:46,200
but it's not necessarily executed immediately.
58
00:02:46,200 --> 00:02:48,400
Eventually of course it will be processed
59
00:02:48,400 --> 00:02:50,090
and your new state will be "Book."
60
00:02:50,090 --> 00:02:52,240
And once that new state is active,
61
00:02:52,240 --> 00:02:54,800
once that state change was processed,
62
00:02:54,800 --> 00:02:56,950
React will reevaluate the component,
63
00:02:56,950 --> 00:02:59,270
it will re-run the component function.
64
00:02:59,270 --> 00:03:01,450
Now, because of that scheduling
65
00:03:01,450 --> 00:03:04,670
where of course you might have multiple outstanding
66
00:03:04,670 --> 00:03:07,420
scheduled state changes at the same time,
67
00:03:07,420 --> 00:03:08,770
because of that,
68
00:03:08,770 --> 00:03:12,610
because multiple updates can be scheduled at the same time,
69
00:03:12,610 --> 00:03:14,160
because of that,
70
00:03:14,160 --> 00:03:18,440
it is recommended that you use this function form
71
00:03:18,440 --> 00:03:19,880
for updating your state
72
00:03:19,880 --> 00:03:22,920
if you depend on the previous state snapshot.
73
00:03:22,920 --> 00:03:25,960
In a lot of cases, this will probably not matter
74
00:03:25,960 --> 00:03:28,270
because it's processed so quickly
75
00:03:28,270 --> 00:03:32,150
that you can't even click fast enough to see a delay
76
00:03:32,150 --> 00:03:35,350
but because it theoretically could be postponed,
77
00:03:35,350 --> 00:03:38,140
this is the safe way of ensuring
78
00:03:38,140 --> 00:03:41,070
that state changes are processed in order
79
00:03:41,070 --> 00:03:42,520
and for every state change
80
00:03:42,520 --> 00:03:44,580
where you depend on the previous state,
81
00:03:44,580 --> 00:03:46,483
you get the latest state.
82
00:03:47,400 --> 00:03:49,880
Otherwise you might just get the latest state
83
00:03:49,880 --> 00:03:52,440
when the component function was executed last,
84
00:03:52,440 --> 00:03:55,110
which is not necessarily the same state
85
00:03:55,110 --> 00:03:58,580
as if the state changes are executed in order.
86
00:03:58,580 --> 00:04:01,230
Because if you have multiple outstanding state changes,
87
00:04:01,230 --> 00:04:04,930
they all come from the same last re-render cycle
88
00:04:04,930 --> 00:04:06,560
of that app component.
89
00:04:06,560 --> 00:04:10,300
They all come from the last component snapshot,
90
00:04:10,300 --> 00:04:12,100
but of course, if they were processed,
91
00:04:12,100 --> 00:04:14,180
the component would re-render in between
92
00:04:14,180 --> 00:04:16,690
but since they're all already scheduled,
93
00:04:16,690 --> 00:04:18,250
all outstanding states changes
94
00:04:18,250 --> 00:04:21,100
don't take that new in-between
95
00:04:21,100 --> 00:04:23,680
component result into account.
96
00:04:23,680 --> 00:04:25,700
That's why this function form is helpful
97
00:04:25,700 --> 00:04:28,470
because there React will actually ensure
98
00:04:28,470 --> 00:04:30,470
that for every outstanding state change,
99
00:04:30,470 --> 00:04:33,360
it looks into the latest state and gives you that
100
00:04:33,360 --> 00:04:35,360
and does not use the latest state
101
00:04:35,360 --> 00:04:37,910
from the last time the component was re rendered.
102
00:04:37,910 --> 00:04:39,400
That's an important difference
103
00:04:39,400 --> 00:04:41,370
between when the component was re-rendered
104
00:04:41,370 --> 00:04:43,723
and when a state change was scheduled.
105
00:04:45,070 --> 00:04:47,560
You can have multiple outstanding state changes
106
00:04:47,560 --> 00:04:50,780
from one and the same component re-evaluation.
107
00:04:50,780 --> 00:04:55,300
That's the key takeaway here and that's why this matters.
108
00:04:55,300 --> 00:05:00,300
That's also why in the last non project module,
109
00:05:00,720 --> 00:05:03,390
where we initially learned about use of fact and so on
110
00:05:03,390 --> 00:05:07,360
it was safe to actually update our form validity
111
00:05:07,360 --> 00:05:10,500
based on the email and password is valid states
112
00:05:10,500 --> 00:05:12,260
instead of use effect,
113
00:05:12,260 --> 00:05:14,480
because just like using the function form
114
00:05:14,480 --> 00:05:17,820
for updating a state based on a previous state snapshot,
115
00:05:17,820 --> 00:05:22,140
useEffect actually because of its dependency mechanism
116
00:05:22,140 --> 00:05:25,930
is ensured to rerun the effect here
117
00:05:25,930 --> 00:05:30,930
every time a state or a value which is a dependency changed.
118
00:05:31,450 --> 00:05:34,750
And therefore you can't miss outstanding state changes
119
00:05:34,750 --> 00:05:37,180
because here it will simply rerun this effect
120
00:05:37,180 --> 00:05:39,990
for every time to component was re executed
121
00:05:39,990 --> 00:05:42,080
the component function was re executed.
122
00:05:42,080 --> 00:05:44,050
It will thereafter always rerun the effect
123
00:05:44,050 --> 00:05:45,970
and therefore you are also guaranteed
124
00:05:45,970 --> 00:05:48,763
to get the latest state when doing it like this.
125
00:05:50,250 --> 00:05:52,190
So these are simply two different patterns
126
00:05:52,190 --> 00:05:55,650
for dealing with one at the same problem you could say,
127
00:05:55,650 --> 00:05:57,740
depending on what you're trying achieve.
128
00:05:57,740 --> 00:05:59,360
Here we want to state updates
129
00:05:59,360 --> 00:06:01,470
that depends on some other states.
130
00:06:01,470 --> 00:06:03,720
In this case, on the other hand we want a state update
131
00:06:03,720 --> 00:06:05,550
that depends on the same state
132
00:06:05,550 --> 00:06:08,810
just a previous snapshot of that state.
133
00:06:08,810 --> 00:06:10,900
So that state updates scheduling
134
00:06:10,900 --> 00:06:13,340
is a mechanism you have to keep in mind,
135
00:06:13,340 --> 00:06:17,080
not because you actively need to do something about that,
136
00:06:17,080 --> 00:06:20,520
React manages those scheduled updates for you,
137
00:06:20,520 --> 00:06:23,350
but because you need to write your code accordingly
138
00:06:23,350 --> 00:06:28,350
to rule out any danger of potentially working without data
139
00:06:28,500 --> 00:06:30,250
you rule it out when using that,
140
00:06:30,250 --> 00:06:32,450
you rule it out when working with useEffect.
141
00:06:33,820 --> 00:06:36,390
Now, there is another important thing you need to know
142
00:06:36,390 --> 00:06:38,930
about state in react.
143
00:06:38,930 --> 00:06:41,940
There, we actually have this nav context
144
00:06:41,940 --> 00:06:44,860
and in the navigate handler I do something which you see
145
00:06:44,860 --> 00:06:47,230
a couple of times throughout this course.
146
00:06:47,230 --> 00:06:51,040
I call two state updating functions after each other.
147
00:06:51,040 --> 00:06:52,360
Now we just learned
148
00:06:52,360 --> 00:06:55,360
that just because you call such a function
149
00:06:55,360 --> 00:06:57,800
does not mean that in the very next line
150
00:06:57,800 --> 00:06:59,460
the state was updated.
151
00:06:59,460 --> 00:07:02,010
State was not updated here.
152
00:07:02,010 --> 00:07:05,030
Instead, we just learned that the update will be scheduled
153
00:07:05,030 --> 00:07:07,510
and eventually the entire component will rerun.
154
00:07:07,510 --> 00:07:09,280
So this component in this case
155
00:07:09,280 --> 00:07:11,730
and then once this component rerun
156
00:07:11,730 --> 00:07:14,090
then we have the latest state available.
157
00:07:14,090 --> 00:07:15,770
Not earlier.
158
00:07:15,770 --> 00:07:17,180
That's what we learned.
159
00:07:17,180 --> 00:07:18,020
Now here however,
160
00:07:18,020 --> 00:07:21,480
we have two state updating functions after each other.
161
00:07:21,480 --> 00:07:25,990
That clearly means that two state updates will be scheduled.
162
00:07:25,990 --> 00:07:27,700
Does this, however,
163
00:07:27,700 --> 00:07:32,030
also mean that the component will be re-executed,
164
00:07:32,030 --> 00:07:34,550
re-evaluated twice.
165
00:07:34,550 --> 00:07:35,940
You could imagine that this happens
166
00:07:35,940 --> 00:07:38,520
but that's actually not what React does here.
167
00:07:38,520 --> 00:07:41,540
Instead, if you have two state updates
168
00:07:41,540 --> 00:07:45,300
in the same synchronous code snippet after each other.
169
00:07:45,300 --> 00:07:48,270
So not in a promise in different than blocks
170
00:07:48,270 --> 00:07:50,810
but in the same function, for example,
171
00:07:50,810 --> 00:07:53,520
where nothing in between would cause a time delay
172
00:07:53,520 --> 00:07:54,640
or anything like that.
173
00:07:54,640 --> 00:07:56,440
So if you have two synchronous lines
174
00:07:57,380 --> 00:07:58,213
of code after each other,
175
00:07:58,213 --> 00:08:01,570
where you would then call a state updating function
176
00:08:01,570 --> 00:08:06,410
in such cases, React will batch those state updates together
177
00:08:07,380 --> 00:08:10,100
in one long synchronous process,
178
00:08:10,100 --> 00:08:13,460
so for example, in one function that executes start to end
179
00:08:13,460 --> 00:08:16,260
without any callbacks or promises in between,
180
00:08:16,260 --> 00:08:20,160
in such cases React will take all the state updates
181
00:08:20,160 --> 00:08:22,310
that are produced by that function
182
00:08:22,310 --> 00:08:26,480
and it will batch them together into one state update.
183
00:08:26,480 --> 00:08:27,980
So back in this picture,
184
00:08:27,980 --> 00:08:31,540
even if we would not just update the new product here,
185
00:08:31,540 --> 00:08:33,760
but if we would update something totally different
186
00:08:33,760 --> 00:08:35,280
in the same function,
187
00:08:35,280 --> 00:08:38,600
we would still just have one scheduled state change
188
00:08:38,600 --> 00:08:41,860
which then however, just changes two different states.
189
00:08:41,860 --> 00:08:43,020
But it's one process.
190
00:08:43,020 --> 00:08:44,800
It's not two scheduled changes
191
00:08:44,800 --> 00:08:49,640
with two upcoming component, re-executions re-evaluations,
192
00:08:49,640 --> 00:08:52,200
but instead it's one scheduled change
193
00:08:52,200 --> 00:08:53,580
where all the different states
194
00:08:53,580 --> 00:08:57,090
you might want to effect are simply batched together.
195
00:08:57,090 --> 00:09:00,050
So state batching is another important concept
196
00:09:00,050 --> 00:09:02,713
you have to be aware of when working with react.
15632
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.