Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,050 --> 00:00:03,700
So in the last lecture I showed you
2
00:00:03,700 --> 00:00:06,630
how you can use one state instead of multiple states.
3
00:00:06,630 --> 00:00:08,630
And I did talk about it there.
4
00:00:08,630 --> 00:00:10,790
Now the way I'm updating my state here
5
00:00:10,790 --> 00:00:13,160
is not entirely correct though.
6
00:00:13,160 --> 00:00:15,500
It technically would work,
7
00:00:15,500 --> 00:00:18,700
but in niche cases it could fail,
8
00:00:18,700 --> 00:00:23,120
and it's simply not a good practice to update it like this.
9
00:00:23,120 --> 00:00:25,100
So what's the problem here?
10
00:00:25,100 --> 00:00:28,290
Here, I'm depending on my previous state
11
00:00:28,290 --> 00:00:29,960
for updating the state.
12
00:00:29,960 --> 00:00:32,670
In this case, we depend on the previous state
13
00:00:32,670 --> 00:00:34,660
because we used this one state
14
00:00:34,660 --> 00:00:37,070
instead of three-states approach
15
00:00:37,070 --> 00:00:39,560
and we need to copy in the other values
16
00:00:39,560 --> 00:00:41,530
so that we don't lose them.
17
00:00:41,530 --> 00:00:44,920
Hence we depend on the previous state snapshot
18
00:00:44,920 --> 00:00:47,120
to copy in the existing values
19
00:00:47,120 --> 00:00:50,960
and then just override one value with a new one.
20
00:00:50,960 --> 00:00:53,980
Now whenever, and that's another key rule
21
00:00:53,980 --> 00:00:55,480
which you should memorize,
22
00:00:55,480 --> 00:00:58,170
whenever you update state
23
00:00:58,170 --> 00:01:01,500
and you depend on the previous state,
24
00:01:01,500 --> 00:01:04,150
so for example, as we do here in this object,
25
00:01:04,150 --> 00:01:06,500
but also if you would be managing a counter
26
00:01:06,500 --> 00:01:09,200
which you increment by one, for example,
27
00:01:09,200 --> 00:01:10,920
whenever you update your state
28
00:01:10,920 --> 00:01:12,940
and you depend on the previous state,
29
00:01:12,940 --> 00:01:15,120
you should not do it like this
30
00:01:15,120 --> 00:01:17,690
but you should use an alternative form
31
00:01:17,690 --> 00:01:19,983
of this state updating function.
32
00:01:21,350 --> 00:01:23,850
Instead of calling it like this,
33
00:01:23,850 --> 00:01:28,083
you should call it and pass in a function to that function.
34
00:01:28,960 --> 00:01:31,520
So you call the setUserInput function
35
00:01:31,520 --> 00:01:33,420
and you pass a function to it,
36
00:01:33,420 --> 00:01:36,373
for example, such an anonymous arrow function.
37
00:01:37,510 --> 00:01:41,580
And this function, which you pass to setUserInput here,
38
00:01:41,580 --> 00:01:44,580
will automatically be executed by React.
39
00:01:44,580 --> 00:01:48,930
And it will receive the previous state snapshot
40
00:01:48,930 --> 00:01:51,410
for that state for which you're calling
41
00:01:51,410 --> 00:01:52,430
the updating function,
42
00:01:52,430 --> 00:01:55,253
so in this case, for this object state here.
43
00:01:56,170 --> 00:01:59,210
So we'll get the previous state snapshot,
44
00:01:59,210 --> 00:02:04,210
and now here, we should return the new state snapshot.
45
00:02:05,630 --> 00:02:06,700
So instead of this function
46
00:02:06,700 --> 00:02:08,900
which we passed to the state updating function,
47
00:02:08,900 --> 00:02:10,833
we return the new state now.
48
00:02:11,720 --> 00:02:13,310
And that now could be,
49
00:02:13,310 --> 00:02:16,000
or in this case, should be, our object
50
00:02:16,000 --> 00:02:19,870
where I copy in the key value pairs from the previous state
51
00:02:19,870 --> 00:02:22,100
with the spread operator,
52
00:02:22,100 --> 00:02:24,240
but where we then also override,
53
00:02:24,240 --> 00:02:28,893
in this case here, enteredTitle with event.target.value.
54
00:02:30,600 --> 00:02:34,210
Now why should we do it like this instead of like this?
55
00:02:34,210 --> 00:02:37,200
In many cases, both will work fine,
56
00:02:37,200 --> 00:02:39,120
but keep in mind that I mentioned
57
00:02:39,120 --> 00:02:42,010
that Reacts schedules state updates,
58
00:02:42,010 --> 00:02:44,690
it doesn't perform them instantly.
59
00:02:44,690 --> 00:02:46,890
And therefore, theoretically,
60
00:02:46,890 --> 00:02:50,700
if you schedule a lot of state updates at the same time,
61
00:02:50,700 --> 00:02:53,070
you could be depending on an outdated
62
00:02:53,070 --> 00:02:54,970
or incorrect state snapshot
63
00:02:54,970 --> 00:02:56,653
if you use this approach.
64
00:02:57,550 --> 00:03:01,010
If you use this approach, React will guarantee
65
00:03:01,010 --> 00:03:03,930
that the state snapshot it gives you here
66
00:03:03,930 --> 00:03:05,650
in this inner function,
67
00:03:05,650 --> 00:03:09,110
will always be the latest state snapshot,
68
00:03:09,110 --> 00:03:13,030
keeping all scheduled state updates in mind.
69
00:03:13,030 --> 00:03:14,740
So this is the safer way
70
00:03:14,740 --> 00:03:16,810
to ensure that you always operate
71
00:03:16,810 --> 00:03:19,760
on the latest state snapshot.
72
00:03:19,760 --> 00:03:23,320
So you should use this function syntax here
73
00:03:23,320 --> 00:03:27,750
whenever your state update depends on the previous state.
74
00:03:27,750 --> 00:03:29,580
That is something you should memorize.
75
00:03:29,580 --> 00:03:32,230
If your state update depends on the previous state,
76
00:03:32,230 --> 00:03:33,733
use this function form.
77
00:03:34,950 --> 00:03:36,800
With all of that though,
78
00:03:36,800 --> 00:03:39,760
I wanted to show this because these are key concepts
79
00:03:39,760 --> 00:03:42,220
which you're also going to see again and again
80
00:03:42,220 --> 00:03:43,430
throughout this course
81
00:03:43,430 --> 00:03:45,720
and throughout a lot of React projects,
82
00:03:45,720 --> 00:03:48,230
but here I will actually comment out
83
00:03:48,230 --> 00:03:50,110
all of these alternatives
84
00:03:50,110 --> 00:03:51,150
and I will switch back
85
00:03:51,150 --> 00:03:54,590
to that multiple states approach instead,
86
00:03:54,590 --> 00:03:56,200
which we initially had.
87
00:03:56,200 --> 00:03:57,900
So let's comment out all of that
88
00:03:57,900 --> 00:04:01,200
and go back to this initial approach.
89
00:04:01,200 --> 00:04:03,060
I just wanted to show the alternative
90
00:04:03,060 --> 00:04:05,510
because it is a valid alternative,
91
00:04:05,510 --> 00:04:07,250
you will see it in many projects,
92
00:04:07,250 --> 00:04:09,780
you will have scenarios where you need it.
93
00:04:09,780 --> 00:04:12,240
And this thing regarding the,
94
00:04:12,240 --> 00:04:14,480
if you depend on the previous state,
95
00:04:14,480 --> 00:04:17,160
use this approach thing here,
96
00:04:17,160 --> 00:04:19,589
that's something you should keep in mind in general,
97
00:04:19,589 --> 00:04:22,750
because you will often depend on a previous state,
98
00:04:22,750 --> 00:04:25,500
not just if you merged state like this
99
00:04:25,500 --> 00:04:27,210
but also in other scenarios,
100
00:04:27,210 --> 00:04:30,070
like the counter which I mentioned, for example.
101
00:04:30,070 --> 00:04:31,620
So that's why I mentioned this.
102
00:04:31,620 --> 00:04:35,373
Nonetheless, let's go back to this multi-state approach now.
7774
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.