All language subtitles for 041 Asynchronous setState_en

Welcome back in this video, I want to cover the topic of state and especially the idea of state updates

being asynchronous.

Let's have a look.

I've just started a base creative reactor project for us, and the only thing I've done up until now

is just update this from a function to a class component.

Now, what I want to do is just simply change this attack to a button and we'll do the same over here.

And we don't need any of this, all we need is, well, let's just say here, update state.

So that we have an update stateman and then finally will create some sort of state that will display

here and let's just say that we want to create, again, using constructor.

I'm going to call super, as we always do.

And then finally, we'll say this state is going to equal and let's just say meaning of life.

It's going to be.

Well, 47 and make sure I have the proper syntax and all we're going to do is just display this state

up here as this dot state.

Dot meaning of life.

So if we save this and we run our server, we should have the meaning of light, meaning of life, but

we also want to update the state.

So again, in this one, we'll just create and this is something we've already seen before.

Right.

So this should become second nature to us by now.

So we create an unclick will say it's going to be this dot handle click and we're create this method

on this component right here.

We'll say handle click, we'll use an arrow function so that we don't have that issue with the this

keyword.

And then in here, we'll simply say this dot set state to update our meaning of life.

Well, let's just incremented by one.

So what I'm going to do is say meaning of life is going to equal this dot state, dot meaning of life

plus one.

That's it.

So if I save this and go back and I click on Update State.

I see that my state is updated every time I click.

Now, here's the thing.

As I've mentioned before.

The React Library helps us manipulate the dumb, but to be efficient and to be fast.

It usually matches multiple sets, state calls, because sometimes we can have in our app multiple sets

take also or multiple locations where we change.

Adam?

Instead of calling set state every single time, it sometimes gets smart and says, oh, don't worry,

if there's a lot of states happening, I'll bastion together and update them all into one single update

for performance.

Now, in our case, this worked, but react actually does not guarantee that when we call this and we

update state that this is going to work.

Why is that?

Well, because this call of said state is asynchronous and what does that mean?

It means that when we click.

On the button, this doesn't happen immediately when we call this sad state, we give control to the

React Library and we say, hey, you take care of this, you know the best time to update the state

for me.

I don't care.

Just do it for me and I'll keep doing something else.

So unlike a Synchronoss goal that this happens immediately when we call it asynchronous, just happens

sometime in the future.

And we actually saw this when you mentioned the fact that if we ever want to check the state, let's

say after we make this call, let's say we do a console dialogue, this dot state dot meaning of life,

if we did this, will notice that this state of meaning of life won't get updated, even though it's

called after the state.

Again, if I save and go back and open up the developer tools, you'll see here that when I click this.

My state is 48, but it council logged 47 and it's always one behind.

And that is because this line runs, we give control to react, to update the state for us, but it

doesn't do it immediately, it does it asynchronously.

And by the time we call this line.

The state had it hasn't been updated and we saw a way to get around this right, we can give a second

parameter to our set state goal, which is our callback, and the callback simply takes a function so

we can just have simple our function here that console logs for us.

So if I move this here now and I save.

Go back and I click.

You see that now everything is in sync.

OK, so that works, but here's the thing.

This is actually bad practice.

Why is that?

Well, because our app is simple right now, this is working, however, because of the way South State

batches work into a single update.

Like I mentioned, if we had multiple sets, state calls, it doesn't guarantee that when we increment

meaning of life that this part meaning of life will be the latest version.

Maybe another part of the app modifies meaning of life to be something else.

So because there is no guarantee there's a rule in react that we have to follow.

And the rule is this, if in your set stakes, you ever use this state directly like this, so instead

of meaning of life being something that well, let's say.

Dolphins where we don't use the state, that's completely fine and we can just give it an object, but

if we ever want to use this state or this dog props in our updates to calculate something, then we

should do something instead of what we do here, which is giving it an object.

So let's just remove all of this or we can keep the callback function over here because this could just

stay there.

The important part is the first parameter.

This object, instead of an object, can also be a function.

And it's a function that receives two things one is the state or to be more descriptive, the previous

state.

And then the second parameter is the previous props.

So if I just wrap this in brackets, since these are the parameters and we call this function and in

here I do the exact same thing where we return an object.

So I'm adding the brackets here so that I don't have to just type in return so that we can actually

return the object here.

If I do this, I can say the meaning of life and say this dot state, dot meaning of life plus one just

like that.

You know, let's put this on a new line just so it's cleaner, so I'll remove the brackets here.

And I'll simply say.

Return.

The object meaning of life just like this.

So this whole function is our first parameter and our second parameter is right here.

So if I do this.

I now can use this previous state to guarantee that when I update this, this is the latest previous

state before the update.

So this is just best practice that you have to remember any time you want to update state.

And there is props or state that you need to use within the update, then you should use the syntax

of using a function instead of an object.

So in here, instead of calling this DOT state directly, I simply just say previous.

State, so if I save this.

And go back and I click update, you see that everything is still working properly.

Awesome.

Now, what about this previous props?

In order for us to play with this, we need to have some sort of props or properties on this app component,

but up until now we've only seen App be the parent or the biggest higher level component.

It's the top of the tree.

But as I mentioned previously, state can live anywhere.

We don't need to have state in just one component.

We can bring it down the tree to another node.

We can mix and match.

And that's something we'll explore throughout the course.

But let me show you how we can get props to the app component.

We simply go to index SJS, where the app component is, and let's say we'll add a increment.

Attribute and this increment attribute will be well, while we increment by now, if I do hear one,

this is going to give me an air.

It's going to say, well, I'm trying to do just sex and I have no idea what this means because remember,

we need to pass it some sort of a value in JavaScript, which means wrapping it in brackets.

So this evaluates to a JavaScript expression, if I say this.

I now have these props.

Now, let's say I wanted to use the props here.

So now I'm going to get the incremental prop.

So I'll just say this.

Got props, Dot.

Inkerman.

If I see this.

All right, it seems to be working, but let's check.

Fi UPD state.

All right, this is working nicely, perfect.

And again, if I wanted to just use previous props, I can just make sure that it's the latest and nothing

has changed it by using previous props if I save it.

Once again.

Everything is working great.

Now, one last thing.

Usually it's good practice to put in here in the constructor and super to put in the props like this.

Now, what does this do?

This allows you to actually use the props in the constructor.

What do I mean, if I do hear this, Dr..

Props.

I can now use this as props inside of the constructor, so if you ever need to use this stop props inside

of the constructor, you need to pass this year.

So, for example, if I just simply do this top Prof's equals props, I save it and I remove the props

from here.

You'll notice that I'll get an air.

Props is not defined because I can I use this props this way.

Now, there are occasions when that needs to happen.

So it's always recommended that you just add props in case you ever need to do this.

Props in here.

So let's say, for example, in our state calculation, we want to say that meaning of life is going

to equal forty seven plus this prop start increment.

So I'll originally be forty eight.

If we safe here, we have previous props here for the increment, if I go back, you see that it's now

forty eight as the default so that the next update will be forty nine.

So this is why we passed props in the constructor and super now the final thing I want to show you is

that we act up has something called the alternate class syntax.

Now, in regular JavaScript, you can do this.

And there are proposals that are going to allow future versions of JavaScript to do this, but you may

see them in common react cabezas.

So I want to show you, because some people don't like this constructor having so many lines of code,

sometimes a state is just a simple thing.

So, for example, if we didn't have any of this increment and we just had the.

Plus one here.

And let's say no props.

Well, we can just remove all of this.

Like, so in just simply say that St..

Is equal meaning of life, which equals forty seven, and that's it.

And if I do this, it leaves out the constructor and initializes the state as a class field declaration.

Again, this is something because of the way we act up and the bable compiler that it has underneath,

but you are going to see this in some code bases where you just want to set state really easily, but

you won't have access to the props inside of here, as we did with the constructor, so that if I save

this, this should still work.

And it does.

Keep in mind, state updates are asynchronous and we want to be careful.

The rule is this do you ever want to manipulate or use the state somehow after the update, then add

in a second parameter, which will be a function where you can use that updated state.

Maybe in your update, in your state update, you have to use the state as part of the calculation or

the props as part of the calculation, then you should pass this function form to update the state.

Otherwise, you can just use the simple object notation that we've seen up until now.

If you get this concept, this is going to take you very far in your career, so hope that makes sense

and I'll see you in the next video.