Our counter score is updating correctly.

However, we're still mutating or altering state directly.

Notice how we're updating the component score state by directly accessing

this.state.score.

The way setState works is it takes the object past to it with the updated

state and eventually merges it into the component's current state.

According to the React docs, a state update may be asynchronous.

In other words,

sometimes updates to the DOM don't happen immediately when you call this.setState.

If you have multiple setState calls inside of an event handler,

React will often batch, or bundle the updates together into a single update.

This is done for

performance reasons, so that your UI is rerendered more efficiently.

So because state maybe updated asynchronously, whenever you need to

update state based on previous state, like update a score based on the previous

score, you shouldn't rely on this .state to calculate the next state.

While it's technically possible to change state this way,

as you can see our counter is working just fine.

It may not always lead to the component rerendering with the new data and

could cause state inconsistency.

So instead of an object, setState also accepts a call back function

that produces state based on the previous state in a more reliable way.

So let's first modify the setState method in increment score

to take a call back function.

The call back function receives the previous state as its first argument and

the props at the time the update is applied as an optional second argument.

We are only going to check the previous value of state before setting a new value,

so let's pass the call back or

reference to the previous state with the parameter prevState.

We will add the arrow then wrap the score property in a return

statement with curly braces.

Now we'll replace this.state.score with prevState.score.

And we'll do the same with the decrement function.

Our counter still functions the same way, but

now we have a more reliable way to set state based on previous state.

Because the callback function is guaranteed to fire after the update is

applied and rendered out to the DOM.

And to make the callback more concise, you could omit the return keyword and

curly braces, by wrapping the body of the function in parentheses.

So whenever you're updating to a new state based on a previous state,

it's actively recommended that you use this approach.

That way, you can be sure that state did indeed update correctly.