Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,550 --> 00:00:06,780
I hope it's clear how to use state hook generally works.
2
00:00:06,810 --> 00:00:13,470
Now, one thing which I'm not liking too much, however, is how complex it is for us to update the
3
00:00:13,480 --> 00:00:13,880
state.
4
00:00:13,920 --> 00:00:16,200
Of course, this is not a complex state here.
5
00:00:16,200 --> 00:00:19,500
It only has two properties, only two things, title and amount.
6
00:00:20,100 --> 00:00:25,140
But still, we have to ensure that when we update the title, we don't lose the old amount and when
7
00:00:25,140 --> 00:00:27,510
we update the amount, we don't lose the old title.
8
00:00:27,630 --> 00:00:29,090
And obviously that's doable here.
9
00:00:29,400 --> 00:00:31,590
But imagine that we had a longer form here.
10
00:00:31,860 --> 00:00:37,770
You would have to write a lot of code just to always save all the old state when you update something
11
00:00:37,770 --> 00:00:38,150
new.
12
00:00:39,090 --> 00:00:44,370
So whilst you can of course, manage state that is an object and wants this off might make sense.
13
00:00:44,820 --> 00:00:50,580
You should also be aware that there is a huge important difference when you compare the state added
14
00:00:50,580 --> 00:00:57,600
by you state to the state you used in Class-Based components in Class-Based components state had to
15
00:00:57,600 --> 00:01:04,739
be an object and react, merged it for you automatically and functional components with U.S. state state
16
00:01:04,739 --> 00:01:08,160
doesn't have to be an object and really doesn't merge it for you.
17
00:01:08,760 --> 00:01:12,360
But what you can do is you can register multiple states.
18
00:01:13,080 --> 00:01:17,010
So it would make much more sense here is that you don't have an object.
19
00:01:17,310 --> 00:01:19,290
But let's say just a string here.
20
00:01:19,530 --> 00:01:26,250
And that is your title, maybe your entered title to make it really clear what you were saying here.
21
00:01:26,460 --> 00:01:32,280
And then you have to set enter title function and then we add another state here.
22
00:01:33,760 --> 00:01:42,880
Which is our entered amount, and we have set entered amount here, and that's use state with an empty
23
00:01:42,880 --> 00:01:43,950
string initially to.
24
00:01:44,500 --> 00:01:50,650
So now I have two states which are both managed independently by react for this component, which is
25
00:01:50,650 --> 00:01:54,030
stored in different variables in which it can set with different functions.
26
00:01:54,430 --> 00:01:58,270
Since I don't have to manually merge anything because these are managed independently.
27
00:01:58,480 --> 00:02:03,700
So I've opted one, the other one will be kept around and vice versa, because as I mentioned already,
28
00:02:04,210 --> 00:02:10,270
these states survive referendum cycles, so they survive updates of other states.
29
00:02:10,479 --> 00:02:13,620
But we don't have to merge manually because it's not an object anymore.
30
00:02:13,690 --> 00:02:16,700
But instead we have two separate strings which were managing a state.
31
00:02:17,620 --> 00:02:23,620
So now here, when we're working with the title, we could just output the entered title here and here.
32
00:02:23,620 --> 00:02:29,530
We're not calling state input state, but all we're calling and it's so much easier is simply.
33
00:02:30,540 --> 00:02:37,050
Set entered title, and we can pass in the new title here, however, we no longer have to store this
34
00:02:37,050 --> 00:02:38,750
in a separate variable.
35
00:02:38,850 --> 00:02:44,010
We don't have that closure problem anymore because there is no inner closure and dysfunction anymore.
36
00:02:44,340 --> 00:02:48,680
Instead, we just call set, enter title and set this two event target value.
37
00:02:49,170 --> 00:02:54,930
We don't have to manage anything, merge anything, because we managed this as two separate states.
38
00:02:55,170 --> 00:03:02,340
So the same here for on change, on the amount we just call set entered amount and set this two event
39
00:03:03,060 --> 00:03:04,590
target value.
40
00:03:05,810 --> 00:03:13,370
It's as easy as that, and if we save this, we still have the same behavior as before, but now in
41
00:03:13,370 --> 00:03:19,700
a much easier way, and this is actually my recommended way of doing this, split your state into multiple
42
00:03:19,700 --> 00:03:20,230
states.
43
00:03:20,240 --> 00:03:27,020
That is how you state is intended to be used and only use objects or erase as values for your state.
44
00:03:27,320 --> 00:03:34,180
If you really have data that changes together or where you need to change multiple things together,
45
00:03:34,520 --> 00:03:40,310
otherwise manage your state independently, it's so much easier, so much easier to write.
46
00:03:40,410 --> 00:03:42,560
You don't have to merge anything manually.
47
00:03:42,770 --> 00:03:45,050
It's a breeze to use it, as you can see.
5195
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.