Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:04,290
So at this point in the section,
2
00:00:04,290 --> 00:00:08,640
you already learned quite a bit about state, and events,
3
00:00:08,640 --> 00:00:11,670
and a lot about React in general.
4
00:00:11,670 --> 00:00:15,600
Now, before we come to an end and conclude this section,
5
00:00:15,600 --> 00:00:16,800
I wanna dive into
6
00:00:16,800 --> 00:00:21,030
another state related very important concept,
7
00:00:21,030 --> 00:00:26,030
and that's the concept of derived or computed state,
8
00:00:26,040 --> 00:00:30,870
or derived or computed values as you could also say.
9
00:00:30,870 --> 00:00:33,510
And to explore this concept,
10
00:00:33,510 --> 00:00:36,750
let's say that below the "expenses filter"
11
00:00:36,750 --> 00:00:41,010
but above the "expense item" elements here,
12
00:00:41,010 --> 00:00:43,770
I wanna show a little text in a paragraph.
13
00:00:43,770 --> 00:00:45,727
And let's say that here, I wanna say,
14
00:00:45,727 --> 00:00:50,727
"Data for years 2019, 2021, and 2022 is hidden,"
15
00:00:54,000 --> 00:00:57,510
if the filter is set to 2020.
16
00:00:57,510 --> 00:01:00,600
If it's set to 2021,
17
00:01:00,600 --> 00:01:05,580
I of course wanna say "2019, 2020, and 2022."
18
00:01:05,580 --> 00:01:08,280
So, I basically wanna list all the years
19
00:01:08,280 --> 00:01:11,190
which are currently not selected.
20
00:01:11,190 --> 00:01:14,670
Now this is actually a feature which I'll soon remove
21
00:01:14,670 --> 00:01:17,790
because we don't actually need it here in this app,
22
00:01:17,790 --> 00:01:20,580
but it is a feature that allows me to explore
23
00:01:20,580 --> 00:01:23,793
this important concept of derived values.
24
00:01:24,870 --> 00:01:28,020
Because one way of implementing this here
25
00:01:28,020 --> 00:01:31,597
would be to register a new state, which we could name,
26
00:01:31,597 --> 00:01:33,990
"filter info text,"
27
00:01:33,990 --> 00:01:38,880
with a "set filter info text" state updating function.
28
00:01:38,880 --> 00:01:43,880
And the initial value here could be this string here maybe,
29
00:01:45,090 --> 00:01:49,710
where we say, "2019, 2021, 2022,"
30
00:01:49,710 --> 00:01:52,267
and then we dynamically output
31
00:01:52,267 --> 00:01:54,903
"filter info text" down there.
32
00:01:56,820 --> 00:02:00,870
And now, we could update this whenever the filter changes.
33
00:02:00,870 --> 00:02:05,870
Then we could check "if selected year is equal to 2019,"
34
00:02:07,440 --> 00:02:11,670
and if that's the case, we call "set filter info text,"
35
00:02:11,670 --> 00:02:16,670
and set this to "2020, '21 and '22."
36
00:02:20,617 --> 00:02:25,440
"Else if selected year is 2020,"
37
00:02:25,440 --> 00:02:30,440
we "set filter info text" to "2019, '21 and '22," and so on.
38
00:02:34,770 --> 00:02:39,060
We also would of course add the condition for '21,
39
00:02:39,060 --> 00:02:42,420
where we set the filter info text like this.
40
00:02:42,420 --> 00:02:47,163
And "else" for the last case, we would exclude '22.
41
00:02:49,350 --> 00:02:52,050
That's how we could implement this.
42
00:02:52,050 --> 00:02:55,500
If we save this, we have this text here.
43
00:02:55,500 --> 00:02:58,020
It's a bit hard to read because it's not styled
44
00:02:58,020 --> 00:03:00,900
because I'll delete it soon anyways.
45
00:03:00,900 --> 00:03:04,320
But you can see that currently 2020 is excluded
46
00:03:04,320 --> 00:03:06,450
because that's the year I selected.
47
00:03:06,450 --> 00:03:09,780
If I switch this to 2021 on the other hand,
48
00:03:09,780 --> 00:03:14,280
this updates and '21 is now excluded in this list here,
49
00:03:14,280 --> 00:03:17,340
and instead all the other years are mentioned.
50
00:03:17,340 --> 00:03:20,460
Also, please keep in mind that the filter doesn't work yet
51
00:03:20,460 --> 00:03:23,070
which is why we see all these years.
52
00:03:23,070 --> 00:03:25,653
But, this text updates as expected.
53
00:03:26,940 --> 00:03:27,810
Nonetheless,
54
00:03:27,810 --> 00:03:32,100
this is typically not how you should implement this.
55
00:03:32,100 --> 00:03:33,660
Whilst it works,
56
00:03:33,660 --> 00:03:37,200
you are managing an additional piece of state
57
00:03:37,200 --> 00:03:39,720
which in the end is redundant.
58
00:03:39,720 --> 00:03:44,400
Because this state here is in the end based on this state.
59
00:03:44,400 --> 00:03:46,080
The year we exclude
60
00:03:46,080 --> 00:03:49,410
is the year we're managing in this state.
61
00:03:49,410 --> 00:03:52,440
So we're managing two pieces of state here,
62
00:03:52,440 --> 00:03:57,440
even though they both depend on the same source so to say.
63
00:03:57,630 --> 00:04:00,090
One state would be enough here.
64
00:04:00,090 --> 00:04:03,360
Instead of being managed as a standalone state
65
00:04:03,360 --> 00:04:06,990
which updates whenever the other state updates,
66
00:04:06,990 --> 00:04:11,730
we should manage the info text as a computed value.
67
00:04:11,730 --> 00:04:16,730
And that's what that derived state or computed state concept
68
00:04:17,220 --> 00:04:18,329
is all about.
69
00:04:18,329 --> 00:04:20,760
If you are setting a state that in the end
70
00:04:20,760 --> 00:04:24,090
is directly related to another state,
71
00:04:24,090 --> 00:04:27,480
you typically don't wanna manage this as a separate state.
72
00:04:27,480 --> 00:04:30,360
Instead you just want to add a new variable,
73
00:04:30,360 --> 00:04:33,570
a good old variable in your component function.
74
00:04:33,570 --> 00:04:36,060
And that could now be the "filter info text"
75
00:04:36,060 --> 00:04:39,060
which initially is this text here
76
00:04:39,060 --> 00:04:41,973
with the year 2020 excluded.
77
00:04:43,740 --> 00:04:46,920
And then we can extract this "if" check here
78
00:04:46,920 --> 00:04:49,140
out of this handler function,
79
00:04:49,140 --> 00:04:52,503
and also put it directly in this component function.
80
00:04:53,490 --> 00:04:56,850
So that there, we now check our filtered year.
81
00:04:56,850 --> 00:05:00,930
So this state on which this value in the end depends,
82
00:05:00,930 --> 00:05:04,650
we use this state in our "if" condition here,
83
00:05:04,650 --> 00:05:06,900
and we simply set our variable
84
00:05:06,900 --> 00:05:09,183
to those different pieces of text.
85
00:05:10,020 --> 00:05:12,480
So instead of updating a separate state,
86
00:05:12,480 --> 00:05:17,480
we just dynamically compute the value of this variable,
87
00:05:17,640 --> 00:05:20,190
and the value will be different
88
00:05:20,190 --> 00:05:23,403
depending on which state was selected.
89
00:05:24,390 --> 00:05:26,880
This condition now also is redundant here,
90
00:05:26,880 --> 00:05:31,350
since the value for this check here is our default anyways.
91
00:05:31,350 --> 00:05:33,840
So, we can even get rid of that.
92
00:05:33,840 --> 00:05:38,070
And now we have this leaner computed code here,
93
00:05:38,070 --> 00:05:41,670
which works because when the state is updated,
94
00:05:41,670 --> 00:05:43,620
when this function here is called,
95
00:05:43,620 --> 00:05:48,360
this component function will re-execute again anyways.
96
00:05:48,360 --> 00:05:51,630
So all this code here will be executed again,
97
00:05:51,630 --> 00:05:53,850
and will derive a new value
98
00:05:53,850 --> 00:05:55,803
for "filter info text" therefore.
99
00:05:56,670 --> 00:05:59,010
Hence, now I save everything,
100
00:05:59,010 --> 00:06:02,430
we get exactly the same behavior as before.
101
00:06:02,430 --> 00:06:07,263
If I switch my state here, my filter, this value updates.
102
00:06:08,250 --> 00:06:11,880
Even though the value itself is not managed as state,
103
00:06:11,880 --> 00:06:14,130
but it's part of the component
104
00:06:14,130 --> 00:06:17,130
that's re-executed when the state changes,
105
00:06:17,130 --> 00:06:20,463
and it then depends on the state that changes.
106
00:06:21,570 --> 00:06:24,120
So this here is a computed value,
107
00:06:24,120 --> 00:06:27,660
a value which we derive based on this state.
108
00:06:27,660 --> 00:06:30,900
And whilst you could also manage multiple states,
109
00:06:30,900 --> 00:06:33,330
and it wouldn't be a huge problem
110
00:06:33,330 --> 00:06:35,763
using derived values like this,
111
00:06:35,763 --> 00:06:40,320
it's typically the more elegant and recommended approach.
112
00:06:40,320 --> 00:06:42,390
Here, I'll get rid of that though
113
00:06:42,390 --> 00:06:45,450
because we don't need that info text.
114
00:06:45,450 --> 00:06:48,930
But knowing about this concept of derived state
115
00:06:48,930 --> 00:06:52,803
or derived values as it's also called, is important.
9294
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.