In this video we start to talk about state management inside react.
And actually this is quite a difficult topic.
And if you manage next several videos of state management then you are golden because after this everything
will go like a breeze.
So first of all, we must talk about use state hook.
What does it mean?
We already prepared here a markup for our quiz.
And for example we can talk here about our next question.
So this is just a button.
We're clicking on this element.
And we want to show something different.
So actually what we can do here we can have a non click event.
And here is how we are writing it.
Inside react it is onclick and inside we are providing a function.
Let's name it test click because we will remove it a little bit later.
Now here I want to create this test click function and it doesn't do anything except of console.log
test click let's check in browser.
I'm clicking on next question and inside console we are getting our text click.
This is fine, but typically we want to change our variables.
For example, here we are on the first question and we want to jump to the second question.
And you may think, okay, I must create a variable here so I can increase it.
For example, let's create a variable question index and by default it will be zero.
And then inside our test click we want to increase it by writing here question index plus plus.
And just to test that here inside next question let's render this variable.
And we are doing it inside brackets.
It is just question index.
Let's reload the page.
As you can see here zero is rendered.
This is completely correct.
I'm clicking on our button and nothing happens.
Our test click happened but our value is still zero.
So this approach doesn't work in react at all.
Why is that?
You must think about react and rendering of components like a snapshot, which actually means in our
case here we have just a single render.
All this component is rendered once what happens inside we are creating this variable question index
every single render.
So we have one render.
We are getting inside.
We are creating this variable and we are rendering all this markup.
We bind it here this onclick event.
And yes it happens.
We are increasing this question index.
But it doesn't really matter because on our next render this question index will be set again to zero.
This code is not how we are writing state inside react.
So instead of this we must create a state.
And in order to do that we must use use state hook.
So we are calling here use state and we are providing inside our initial state.
And let's say our initial state is zero because our question index is zero.
And what we are getting back is an array of two elements.
First of all, it is our value of the state, and secondly it is the setter to update it.
This is why typically we destructured with the brackets and here we are getting our value.
For example, let's name it question index or even better, current question index.
And the second element in the array is our setter.
So it is set current question index.
Now we can remove this slat.
We don't need it anymore.
And here instead of this question index I want to render current question index.
And now here instead of this code with plus plus what we want to do, we want to increase our current
question index.
Where do we need by calling our setter and providing here a new value.
And we are providing here current question index plus one, which actually means we are increasing it
every single time.
Let's have a look in browser.
Here we are reloading the page we are getting.
Next question zero.
I am clicking and we are getting one.
I'm clicking again.
We are getting two now.
It works.
Why it happens?
In order to understand it we must try it here console.log render.
And let's reload the page.
As you can see here directly, we got one single render react rendered our component once.
Now here we are clicking on our button and we are getting render again.
Why?
It happens because react rendered our component when we updated the state.
And exactly this line.
The setter is what updates our state and changing the state inside react triggers the rendering of the
component.
This component is rendered, but our value is stored inside state and it is not being overwritten again
and again.
This is why our component is rendered.
But now we know that our state was changed and we are rendering here one.
This is exactly one, but you must think of rendering like a snapshot.
In our first render of this component, we rendered it with value zero.
In the second render we simply rendered it with value one.
For react.
This component just a simple variable with value one which it must render.
And this is the simplest approach in react.
To manage state you just use your state you.
Provide some default value.
You are getting here your value and your setter.
And inside your component you can directly render your value and you can use setter in order to change
your value.
And as you can see, it is working quite nicely.