So Industrial Real will be discussing about hoax, right?
So the simplest of that to discuss and that is in our project is the use data.
So the first thing that we do is important you straight up from the act module.
So just go and use state.
To be imported from React what you.
So now that we have imported a React module, let's discuss what is in our app.
This might be the simplest counter that you have ever encountered.
It has a plus sign it as a minus sign and it has an integer.
And at present, this plus sign in this minus sign doesn't do much.
So we will be adding its functionality.
Well, as you might be aware, Blue State helps us to leverage the benefit of state in a functional
component.
And first things first, you state our.
We only use in picture components that aren't allowed in platform components because in glass components,
the way of handling it is quite different.
So let's create our first use state.
So what does you state does is actually it returns us an error.
So what does it returns us and edit?
So let's animate count.
And the setup should be set count.
So what we have over here is that going to the variable set, going to the search function that is going
to set the value of count and inside the you state, there's going to be the initial value of what the
count is going to hold.
So going to the variable that is going to hold the state set count, there's a function that is going
to set the value of account, whereas in your state the argument that the person is the initial value
of the account.
So for example, if rather than putting up a zero a year, if we dynamically oportunidades value to
count, you will see number three being printed about him.
Right.
So now let's discuss how to use that gong for that purpose.
Let us make two functions and name them.
Let's see what function, increment and its value is going to be to the property of this function is
going to increase our value by one and another function that is going to be called as function decrement
function.
The.
And the property might be visible from its name, it is going to decrease the value of a function of
our suggested variable or discount if you can see the value in.
OK, so now let's define the properties in it, so this is going to set the account whenever this function
is going to be called.
To gold minus one count, plus one in case of increment and.
This is going to decrease the value by one count minus one.
Now let's call these functions inside our button elements and on.
And let me just put up increment as well as in the negative sign.
Unclear.
Should be able to.
Decrement.
So now we have a functions of limited initial attack.
So now if I click on Plus button, you will see the value is going to increase by one.
And if I click on minus button, the well is going to decrease by one.
So we have a functional counter, right?
But what if I just increase just endured when most had gone to him?
Right.
So now what should happen if I hit the button bless might two, right?
So let us see if that happens or not.
What we see is only one number is getting increased right.
There is only increment of one.
So why this is happening, because these two functions are actually what they're doing is they're overriding
one another.
So in case you want to overcome this and this is not the best practice that we have actually done,
we're here to overcome the flaws that we have in this court.
Let's just use the previous state, previous government.
So now, if we increase our value to one, it is going to increase our rate.
But what if we just copied this function and copied the statement and again pasted a knife?
I'm going to hit the plastic and you will see two numbers getting eliminated eight, 10 12.
So in the difference between this piece of code and the previous one is that it is using our previous
date to increment that new state.
While the previous one was not doing so, it was.
Make this code more cleaner, and we have to just define the same for the decrement one.
OK, so here you have one encounter with the use they took and that we're able to increment by one as
well as the decrement by one.
Now, the end of the hook that they're going to use in our application is the use of OK, so for that
purpose, we have to first import our use effect from a React module.
And if in a simplest format to explain what really effect hook it is plus side effects.
So just consider log it and type the value rendered.
And this is going to be rendered every time a component states changes or it is being rendered.
So just aprender.
And if you run it or change it, state any time it is going to be rendered like render one two three
four five six and I mean incrementally increment the value.
It is going to change and it is going to be rendered use a vector.
Now it is.
It comes with another parameter.
We can pass an empty array or in this case, we are going to pass a count value.
And now this, we're only going to be rendered when the value of count changes.
So to display it, let's just remove that one.
And if are going to remove that, that means every time we hit plus icon, there will be absolutely
no change in state.
So you will see there will be no renders then.
So in effect, minus sign will see that it is incrementing.
But in case of +9, you won't see the numbers being incremented or so if we just add again one take.
And if it was an empty area, it is only going to be rendered once when a component gets mounted.
So let's just refresh our app for that purpose.
No, it is it has been rendered, and now no matter what we change, if we change the state or not,
it is not going to be rearranged again.
So this is the property that they're going to use.
This is the place that we are going to go that API on.