Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,464 --> 00:00:04,420
Now we just learned about useEffect,
2
00:00:04,420 --> 00:00:07,430
which I mentioned would be the most important
3
00:00:07,430 --> 00:00:10,290
React Hook besides useState.
4
00:00:10,290 --> 00:00:13,833
Are you ready for the next React Hook, useReducer?
5
00:00:14,840 --> 00:00:17,750
Now, useReducer is another built in Hook
6
00:00:17,750 --> 00:00:20,840
and it will help us with state management.
7
00:00:20,840 --> 00:00:22,653
So it's a bit like useState,
8
00:00:23,590 --> 00:00:26,630
but actually with more capabilities
9
00:00:26,630 --> 00:00:30,400
and especially useful for more complex state.
10
00:00:30,400 --> 00:00:33,670
Because sometimes you have more complex state,
11
00:00:33,670 --> 00:00:37,840
for example, multiple States that kind of belong together,
12
00:00:37,840 --> 00:00:40,300
that are managing the same thing
13
00:00:40,300 --> 00:00:42,593
just different aspects of it.
14
00:00:43,480 --> 00:00:45,850
Or you have multiples states
15
00:00:45,850 --> 00:00:47,670
that kind of change together
16
00:00:47,670 --> 00:00:49,640
or are related.
17
00:00:49,640 --> 00:00:50,900
In such cases,
18
00:00:50,900 --> 00:00:53,360
useState and the state you get from there
19
00:00:53,360 --> 00:00:57,590
often becomes hard or error-prone to use and manage.
20
00:00:57,590 --> 00:01:00,070
And it's easy then to ride bad
21
00:01:00,070 --> 00:01:03,730
or inefficient or potentially buggy code,
22
00:01:03,730 --> 00:01:06,757
which is of course it's never what we want.
23
00:01:06,757 --> 00:01:10,460
useReducer is then an alternative to useState.
24
00:01:10,460 --> 00:01:11,990
So it's a replacement,
25
00:01:11,990 --> 00:01:15,030
if you need a more powerful state management.
26
00:01:15,030 --> 00:01:16,220
Now, this does not mean
27
00:01:16,220 --> 00:01:19,010
that you should always use useReducer
28
00:01:19,010 --> 00:01:20,750
because it's more powerful,
29
00:01:20,750 --> 00:01:22,890
so it's always better.
30
00:01:22,890 --> 00:01:25,650
No, because it's also a bit more complex to use,
31
00:01:25,650 --> 00:01:27,160
It requires a bit more setup.
32
00:01:27,160 --> 00:01:30,540
So for a lot of scenarios for the majority
33
00:01:30,540 --> 00:01:33,920
I would argue you probably use useState.
34
00:01:33,920 --> 00:01:37,470
But there are cases where the extra work
35
00:01:37,470 --> 00:01:39,930
of getting useReducer to work,
36
00:01:39,930 --> 00:01:41,063
is just worth it.
37
00:01:42,200 --> 00:01:43,540
That's all very abstract.
38
00:01:43,540 --> 00:01:46,140
What would be a concrete example?
39
00:01:46,140 --> 00:01:50,720
We can again, go back to the good old Login.js file here.
40
00:01:50,720 --> 00:01:54,660
Here, you see I'm managing a couple of states snapshots,
41
00:01:54,660 --> 00:01:59,370
and you might be able to spot some related state here.
42
00:01:59,370 --> 00:02:02,480
We managed the enteredEmail and the enteredPassword,
43
00:02:02,480 --> 00:02:06,330
but then we also managed the fact or the question
44
00:02:06,330 --> 00:02:07,900
the response to the question,
45
00:02:07,900 --> 00:02:10,660
whether the email or the password is valid.
46
00:02:10,660 --> 00:02:14,060
And we managed the overall form validity.
47
00:02:14,060 --> 00:02:17,640
So you could argue that overall,
48
00:02:17,640 --> 00:02:19,320
this is all one big state
49
00:02:19,320 --> 00:02:22,570
that describes the overall form state.
50
00:02:22,570 --> 00:02:25,260
The inputs are part of that,
51
00:02:25,260 --> 00:02:28,210
or you at least treat every input
52
00:02:28,210 --> 00:02:30,590
as one entity and one state,
53
00:02:30,590 --> 00:02:33,120
which simply has two aspects.
54
00:02:33,120 --> 00:02:35,480
The value the user entered
55
00:02:35,480 --> 00:02:38,453
and the validity of that input.
56
00:02:39,390 --> 00:02:42,880
And it becomes clear that we have some work to do
57
00:02:42,880 --> 00:02:45,550
and some redundancy if we consider the fact
58
00:02:45,550 --> 00:02:48,060
that we're setting the overall form validity,
59
00:02:48,060 --> 00:02:51,210
by checking the validity of email and password
60
00:02:51,210 --> 00:02:54,597
when we're doing the exact same thing here
61
00:02:56,680 --> 00:02:59,380
for our two validate handlers.
62
00:02:59,380 --> 00:03:01,870
Now we could rewrite this in various ways.
63
00:03:01,870 --> 00:03:05,413
And for example, use our emailIsValid
64
00:03:05,413 --> 00:03:08,470
and passwordIsvalid states here in this useEffect
65
00:03:08,470 --> 00:03:12,180
and just use those two states to confirm
66
00:03:12,180 --> 00:03:14,120
whether the overall form is valid
67
00:03:14,120 --> 00:03:16,070
and that it would work.
68
00:03:16,070 --> 00:03:19,830
But nonetheless, we at least have these two states,
69
00:03:19,830 --> 00:03:22,210
the entered email in this example,
70
00:03:22,210 --> 00:03:24,000
and the validity of the email
71
00:03:24,000 --> 00:03:26,820
that clearly kind of belong together,
72
00:03:26,820 --> 00:03:29,543
and which we therefore might wanna manage together.
73
00:03:30,750 --> 00:03:33,530
In addition, I wanna come back to something
74
00:03:33,530 --> 00:03:35,300
which we don't have any more
75
00:03:35,300 --> 00:03:37,380
because we're using useEffect,
76
00:03:37,380 --> 00:03:39,230
but what we had before.
77
00:03:39,230 --> 00:03:41,760
If I commit out useEffect here
78
00:03:41,760 --> 00:03:44,340
before you might remember
79
00:03:44,340 --> 00:03:46,950
that inside of email change handler,
80
00:03:46,950 --> 00:03:49,150
and password change handler,
81
00:03:49,150 --> 00:03:51,083
we had a slightly different code.
82
00:03:52,630 --> 00:03:55,330
We had this code here essentially,
83
00:03:55,330 --> 00:03:57,250
not just in the email change handler,
84
00:03:57,250 --> 00:03:59,200
but also in the password change handler
85
00:04:00,600 --> 00:04:04,640
where we checked the other entered value
86
00:04:04,640 --> 00:04:08,240
and entered value for this handler
87
00:04:08,240 --> 00:04:10,130
with event target value,
88
00:04:10,130 --> 00:04:13,033
and we would derive the Form validity from that.
89
00:04:14,490 --> 00:04:16,410
Now this approach also worked,
90
00:04:16,410 --> 00:04:18,459
but we had some code re-usage,
91
00:04:18,459 --> 00:04:21,500
which is why the Effect was a better result
92
00:04:21,500 --> 00:04:23,010
But let's say for whatever reason
93
00:04:23,010 --> 00:04:26,230
you don't wanna take that route to useEffect.
94
00:04:26,230 --> 00:04:28,110
In that case, you would have a number problem
95
00:04:28,110 --> 00:04:30,520
and I'm just going back to the solution
96
00:04:30,520 --> 00:04:31,770
to show you this problem,
97
00:04:31,770 --> 00:04:33,440
which you can have in some apps
98
00:04:33,440 --> 00:04:34,640
and in some use cases.
99
00:04:34,640 --> 00:04:37,410
Here we are updating some state
100
00:04:37,410 --> 00:04:39,370
the Form validity state,
101
00:04:39,370 --> 00:04:41,970
based on two other states.
102
00:04:41,970 --> 00:04:43,710
Now, what did you learn about
103
00:04:43,710 --> 00:04:48,100
updating the state based on some older state?
104
00:04:48,100 --> 00:04:50,860
You wanna use the function form, right?
105
00:04:50,860 --> 00:04:52,410
Notice doesn't work here however,
106
00:04:52,410 --> 00:04:55,680
because that's only true if your next state update,
107
00:04:55,680 --> 00:05:00,110
depends on the previous state snapshot of the same state.
108
00:05:00,110 --> 00:05:04,300
But here we depend on two other states' snapshots
109
00:05:04,300 --> 00:05:06,900
of different state of the entered email
110
00:05:06,900 --> 00:05:08,100
and the enter password,
111
00:05:08,100 --> 00:05:11,773
not on the last state snapshot of the form validity.
112
00:05:12,790 --> 00:05:15,440
So therefore here actually we're doing something
113
00:05:15,440 --> 00:05:17,450
which you normally shouldn't do.
114
00:05:17,450 --> 00:05:21,360
Because of the way React schedules state updates,
115
00:05:21,360 --> 00:05:25,960
this code here could actually in rare cases,
116
00:05:25,960 --> 00:05:28,960
but it could actually lead to the scenario
117
00:05:28,960 --> 00:05:31,480
where this runs before,
118
00:05:31,480 --> 00:05:35,460
for example, password state update was processed.
119
00:05:35,460 --> 00:05:36,970
So therefore enteredPassword
120
00:05:36,970 --> 00:05:38,000
when this code runs,
121
00:05:38,000 --> 00:05:41,930
might not contain the latest entered password,
122
00:05:41,930 --> 00:05:45,360
because of how React schedules state updates.
123
00:05:45,360 --> 00:05:47,150
That's what I preached before,
124
00:05:47,150 --> 00:05:51,000
and why I urged you to use the function form.
125
00:05:51,000 --> 00:05:52,500
But again, it's not available here
126
00:05:52,500 --> 00:05:55,380
because we're depending on two other states
127
00:05:55,380 --> 00:05:58,453
and not the last snapshot of this form validity state.
128
00:05:59,630 --> 00:06:02,970
This is another scenario where you could use useReducer.
129
00:06:02,970 --> 00:06:04,980
So it's a good use case,
130
00:06:04,980 --> 00:06:07,290
a good replacement of useState.
131
00:06:07,290 --> 00:06:10,000
When you have states that belongs together,
132
00:06:10,000 --> 00:06:11,790
like here, with the entered value
133
00:06:11,790 --> 00:06:13,810
and the validity of the value
134
00:06:13,810 --> 00:06:17,210
and or if you have state updates
135
00:06:17,210 --> 00:06:20,160
that depend on other state.
136
00:06:20,160 --> 00:06:25,160
And actually we don't even have to go back to this code.
137
00:06:25,350 --> 00:06:30,350
We already violate this rule of using the function form
138
00:06:30,700 --> 00:06:33,540
if a state update depends on an older state.
139
00:06:33,540 --> 00:06:36,953
Here in our validateEmail
140
00:06:36,953 --> 00:06:39,900
and validatePassword handlers.
141
00:06:39,900 --> 00:06:43,780
There, we are calling setEmailIsValid
142
00:06:43,780 --> 00:06:45,901
and setPasswordIsValid,
143
00:06:45,901 --> 00:06:47,880
to set new states,
144
00:06:47,880 --> 00:06:49,969
for this emailIsValid
145
00:06:49,969 --> 00:06:52,960
and passwordIsValid state.
146
00:06:52,960 --> 00:06:54,290
These are our two states,
147
00:06:54,290 --> 00:06:56,010
which we're setting there.
148
00:06:56,010 --> 00:06:58,870
Now, how are we setting these states?
149
00:06:58,870 --> 00:07:02,210
Well, by having a look at another state
150
00:07:02,210 --> 00:07:04,610
and calling a method on it.
151
00:07:04,610 --> 00:07:07,580
We're having a look at the enteredEmail state,
152
00:07:07,580 --> 00:07:09,210
which is a different state.
153
00:07:09,210 --> 00:07:11,390
This is our enteredEmail state.
154
00:07:11,390 --> 00:07:15,640
It's a different state than our emailIsvalid state.
155
00:07:15,640 --> 00:07:18,240
Sure, they are related.
156
00:07:18,240 --> 00:07:21,650
They both changed because of what the user entered,
157
00:07:21,650 --> 00:07:26,020
but technically these are two different states,
158
00:07:26,020 --> 00:07:29,000
two different variables.
159
00:07:29,000 --> 00:07:34,000
And we are deriving our new emailIsvalid state
160
00:07:34,350 --> 00:07:36,080
by looking at another state
161
00:07:36,080 --> 00:07:39,810
and that is something we should not do.
162
00:07:39,810 --> 00:07:42,400
It works in most cases,
163
00:07:42,400 --> 00:07:45,670
but in some scenarios it could not work
164
00:07:45,670 --> 00:07:48,100
because maybe some state update
165
00:07:48,100 --> 00:07:51,750
for enteredEmail wasn't processed in time.
166
00:07:51,750 --> 00:07:55,280
And then we would try to update emailIsValid,
167
00:07:55,280 --> 00:07:59,320
based on some outdated enteredEmail state.
168
00:07:59,320 --> 00:08:01,530
So we should use the function form here,
169
00:08:01,530 --> 00:08:06,070
but again, just as with a setFormIsValid we can't,
170
00:08:06,070 --> 00:08:08,150
because with the function form
171
00:08:08,150 --> 00:08:10,670
of our state updating function here.
172
00:08:10,670 --> 00:08:13,060
We only get the latest state
173
00:08:13,060 --> 00:08:15,820
for that state which we're setting here.
174
00:08:15,820 --> 00:08:19,160
So we would get the latest emailIsValid state
175
00:08:19,160 --> 00:08:21,890
not the latest enteredEmail state
176
00:08:21,890 --> 00:08:24,120
if we use the function form here.
177
00:08:24,120 --> 00:08:26,460
So that's why this is not an option.
178
00:08:26,460 --> 00:08:30,470
And therefore here we are already violating this rule
179
00:08:30,470 --> 00:08:34,159
which I told you to well not to violate.
180
00:08:34,159 --> 00:08:37,230
And that is a scenario where useReducer
181
00:08:37,230 --> 00:08:39,309
is always a good choice.
182
00:08:39,309 --> 00:08:41,159
If you update a state,
183
00:08:41,159 --> 00:08:43,970
which depends on another state,
184
00:08:43,970 --> 00:08:47,640
then merging this into one state could be a good idea.
185
00:08:47,640 --> 00:08:51,020
And you can do that without useReducer as well.
186
00:08:51,020 --> 00:08:53,260
You could simply manage an email state,
187
00:08:53,260 --> 00:08:55,200
which is an object with the value
188
00:08:55,200 --> 00:08:58,010
and the valid being part of the same object.
189
00:08:58,010 --> 00:09:00,480
You could do it with the useState,
190
00:09:00,480 --> 00:09:01,970
but in such cases
191
00:09:01,970 --> 00:09:04,330
when your state becomes more complex,
192
00:09:04,330 --> 00:09:08,287
bigger and combines multiple related states,
193
00:09:08,287 --> 00:09:12,110
useReducer can also be worth a closer look.
194
00:09:12,110 --> 00:09:15,433
And that's why we'll dive into it in the next lecture.
14745
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.