Original subtitles

State is actually not a React specific concept

but it is a key concept in React as well.

And here in ExpenseItem,

we have a scenario where we wanna use

that built-in state concept.

Because this title here

which changes when the clickHandler executes

is actually data that should result

in this component being re-evaluated

and re-drawn on the screen when it's changes,

when that's title data changes.

And by default, regular variables like this one,

are not triggering such a re-evaluation.

React doesn't care about that.

If you have a variable in your component function

and the that variable changes, React ignores it.

It doesn't care about that, that code executes, sure,

but the overall component function doesn't execute again

just because some variable changed.

And as a side note, even if it would execute again,

of course then title, this variable,

would all just be retreated

and re initialized to the props value.

Because as part of this component function

we are creating this title variable.

So even if that would happen

we wouldn't reach the desired result

but we don't even need to think about that

because it is not happening.

This ExpenseItem component function currently

is not called a second time after the initial rendering

just because a click occurred

or because a variable changed

does not trigger this component function to run again.

So to tell React that it should run it again,

we need to import something from the React library.

And we do it as by adding a so-called named import.

This here, is the default import.

Now, we can add a comma

and curly braces and between the curly braces

we can now extract specifically named things

from the React library.

Here we imported the overall React object,

now we want to import single pieces from the React library.

And we want to import a function here,

a function which is called useState.

This is a function provided by the React library

and this function allows us to define values

as state where changes to these values should reflect

in the component function being called again,

which is a key difference

to the regular variable we're using here.

Now, how do we use this useState function though?

Well, it's very simple.

Inside of our component function and that's important,

we have to do that inside of this function.

We just call useState.

And useState is a so-called React hook.

There are other hooks as well,

and of course we are going to learn

about all important hooks for all at this course

but that is one of the most important ones.

And all these React hooks can be recognized

by the fact that they start with the word "use"

in their name,

and all these hooks must only be called

inside of React component functions like ExpenseItem.

They can't be called outside of these functions, like this.

And they all just shouldn't be called

in any nested functions.

They must be called directly

inside such component functions.

There is one exception which we'll talk about later

but for the moment, that is what you should keep in mind.

Now, useState doesn't work just like that.

Instead, useState once a default state value,

because with useState

we basically create a special kind of variable,

you could say,

a variable where changes will lead

this component function to be called again.

And of course we can therefore assign an initial value

for that special variable,

just as we're assigning a value here

for does regular variable.

So here, my initial value is props.title.

And we simply pass this as an argument to useState.

Now does special variable is created.

Of course, we also want to be able to use that variable,

we want to be able to use it down here, for example

and therefore useState also returns something.

It gives us access to this special variable.

However, it does not just return that,

it also returns a function which we can then call

to assign a new value to that variable.

So we'll not be assigning values like this

with the equal sign,

instead, we will be assigning new values

by calling a function.

That's just how this state variable thing works.

And for that useState actually returns an array

where the first value is the variable itself,

you could say, the value itself.

And the second element in the array

is that updating function.

And we can use a modern JavaScript feature

called array destructuring, which looks like this,

to store both elements in separate variables

or constants, and here I'll use constants.

And I'll come back to why it's a constant in a second.

Now you can choose any names of your choice

because for a radius structuring, it's just your order

which matters and all named as title and setTitle.

The first element, as I just said,

is a point at that managed value.

So initially at props title, the value stored

in props title,

and the second element here

is a function which we can later call to set a new title,

hence this name, which I chose.

Both names are up to you,

but the convention is to use something

which describes the value

as a name for this first element, since that is the value

and then set, and then that name repeated

just with a capital starting character here.

This capital T for that function which updates the value.

That's the convention

on how you name these two elements returned by useState.

And useState, this hook, always returns an array

with exactly two elements.

That's always the case.

And it's always the case

that the first element is the current state value.

And the second element is a function for updating that.

Now with that, we can remove that title variable

and we can also remove that value assignment

in clickHandler.

And we can still use title like this down there in JSX.

So if we now save it like this,

we still see toilet paper here.

So that hasn't changed,

but of course the button still doesn't do anything

because at the moment we're never updating this.

Now, as I said, with the value returned by useState,

we're not going to assign a new value with an equal sign.

Instead, we assign a new value by calling setTitle.

So by calling this state updating function

and then we just passed a new value

as argument, in this case updated.

Now, why does it work like this though?

Why do we have this state updating function

instead of assigning a new value like this?

The reason for that is, that calling this function

does not just assign a new value to some variable,

but that instead it is a special variable to begin with.

It's managed by React somewhere in memory.

And when we call this state updating function,

this special variable will not just receive a new value

but, and that's important,

the component function in which you called

this state updating function.

And in which you initialized your state with useState

will be executed again.

And that is exactly what we need.

We want to call this component function again

when our state changes.

And by calling this state updating function

that's happening.

Because by calling this function,

you're telling React that you wanna assign a new value

to this state.

And that then also tells React

that the component in which this staid was registered

with useState should be re-evaluated.

And therefore React will go ahead

and execute this component function again,

and therefore also evaluate this JSX code again.

And then it will draw any changes which it's detects

compared to the last time it evaluated this onto the screen.

So if we now save everything,

if I click Change Title,

you see the title changes to updated

for the ExpenseItem in which we're doing this.

And that's now how this works.

Now you will notice that these console locks

still show the title before it was updated.

The reason for this is that calling

this state updating function

actually doesn't change the value right away,

but instead schedules this state update.

So in the very next line thereafter,

this new value isn't available yet.

That's why we see the old value being locked

even though we updated it before logging.

But you do see

that eventually this component is called again

and is evaluated again.

And that therefore we see our updated value on the screen.

That's how React state works.

And this is another key concept in React.

If you have data, which might change,

and where changes to that data should be reflected

on the user interface

then you need state

because a regular variables will not do the trick

with state, however you can set and change values.

And when they do change,

React will re-evaluate the component

in which the state was registered.

And only that component, by the way

not any other components,

just this component in which this state was registered.

Now let's take a closer look

at the state and why we use const.

And how does all works in detail.