Original subtitles

So at this point in the section,

you already learned quite a bit about state, and events,

and a lot about React in general.

Now, before we come to an end and conclude this section,

I wanna dive into

another state related very important concept,

and that's the concept of derived or computed state,

or derived or computed values as you could also say.

And to explore this concept,

let's say that below the "expenses filter"

but above the "expense item" elements here,

I wanna show a little text in a paragraph.

And let's say that here, I wanna say,

"Data for years 2019, 2021, and 2022 is hidden,"

if the filter is set to 2020.

If it's set to 2021,

I of course wanna say "2019, 2020, and 2022."

So, I basically wanna list all the years

which are currently not selected.

Now this is actually a feature which I'll soon remove

because we don't actually need it here in this app,

but it is a feature that allows me to explore

this important concept of derived values.

Because one way of implementing this here

would be to register a new state, which we could name,

"filter info text,"

with a "set filter info text" state updating function.

And the initial value here could be this string here maybe,

where we say, "2019, 2021, 2022,"

and then we dynamically output

"filter info text" down there.

And now, we could update this whenever the filter changes.

Then we could check "if selected year is equal to 2019,"

and if that's the case, we call "set filter info text,"

and set this to "2020, '21 and '22."

"Else if selected year is 2020,"

we "set filter info text" to "2019, '21 and '22," and so on.

We also would of course add the condition for '21,

where we set the filter info text like this.

And "else" for the last case, we would exclude '22.

That's how we could implement this.

If we save this, we have this text here.

It's a bit hard to read because it's not styled

because I'll delete it soon anyways.

But you can see that currently 2020 is excluded

because that's the year I selected.

If I switch this to 2021 on the other hand,

this updates and '21 is now excluded in this list here,

and instead all the other years are mentioned.

Also, please keep in mind that the filter doesn't work yet

which is why we see all these years.

But, this text updates as expected.

Nonetheless,

this is typically not how you should implement this.

Whilst it works,

you are managing an additional piece of state

which in the end is redundant.

Because this state here is in the end based on this state.

The year we exclude

is the year we're managing in this state.

So we're managing two pieces of state here,

even though they both depend on the same source so to say.

One state would be enough here.

Instead of being managed as a standalone state

which updates whenever the other state updates,

we should manage the info text as a computed value.

And that's what that derived state or computed state concept

is all about.

If you are setting a state that in the end

is directly related to another state,

you typically don't wanna manage this as a separate state.

Instead you just want to add a new variable,

a good old variable in your component function.

And that could now be the "filter info text"

which initially is this text here

with the year 2020 excluded.

And then we can extract this "if" check here

out of this handler function,

and also put it directly in this component function.

So that there, we now check our filtered year.

So this state on which this value in the end depends,

we use this state in our "if" condition here,

and we simply set our variable

to those different pieces of text.

So instead of updating a separate state,

we just dynamically compute the value of this variable,

and the value will be different

depending on which state was selected.

This condition now also is redundant here,

since the value for this check here is our default anyways.

So, we can even get rid of that.

And now we have this leaner computed code here,

which works because when the state is updated,

when this function here is called,

this component function will re-execute again anyways.

So all this code here will be executed again,

and will derive a new value

for "filter info text" therefore.

Hence, now I save everything,

we get exactly the same behavior as before.

If I switch my state here, my filter, this value updates.

Even though the value itself is not managed as state,

but it's part of the component

that's re-executed when the state changes,

and it then depends on the state that changes.

So this here is a computed value,

a value which we derive based on this state.

And whilst you could also manage multiple states,

and it wouldn't be a huge problem

using derived values like this,

it's typically the more elegant and recommended approach.

Here, I'll get rid of that though

because we don't need that info text.

But knowing about this concept of derived state

or derived values as it's also called, is important.