The first thing to be aware of is that the setState function in React works in an asynchronous manner. This may annoy some developers, as the state values ​​are not available immediately after the update.

There are two forms of using setState: the object-based approach and the functional approach.

Let’s see both in action. We will understand the problem with object based setState in this process.

Let’s create a simple application.

The above code, when executed, renders the value and message from the state object and also renders a button.

If you take a look at the click handler, we have two consecutive setState functions that access this.state value.

The behavior we are expecting is that when the button is clicked, the correct position value should be rendered in the below div (removed for reference):

We are expecting that both the state values ​​should be same when the button is clicked.

Let’s see its output.

The initial output is shown below, as the value starts at 0.

Since the setState call is asynchronous before the first setState has completed execution, a reference to the second setState may point to the previous value, not the first current updated one.

We’ll fix this using the functional aspect of setState.

The above method uses functional parameters in setState.

This can be an arrow function as shown above or a normal ES5 function.

This function takes two parameters as arguments: the first is prevState, and the second is props (if you also need props, which are passed from the parent component). Here we are looking only in prevState.

The above prevState is related to the setState function as it is the last updated state. It will always point to the correct value.

Let’s see the output after a few clicks. You will find that the values ​​are always in sync when you click the second button.

In the above example, you can see that using the functional setState parameter correctly batches the previous state, and you get the predicted state values.

We should be aware of another caveat: setState() takes another callback function, which is executed after the state value has been successfully updated.

This is very handy in the case where you have to perform some operation after the setState is updated successfully.

Let’s look at one last example.

Let’s say we want to log state value after update, and we write code as below. I would use onClickfn() handler for this.

In the above example, we are using setState() as the second callback parameter. This callback will be executed once setState() has completed its operation.

Let’s see the final output with the above modified code.

I hope this short article clears up some misconceptions about setState.

Promotion: Special $10 coupon for Medium readers for my upcoming live ReactJS – Master Frontend Engineering in 12 to 20 weeks if you want to support our open source course.

The first thing to be aware of is that the setState function in React works in an asynchronous manner. This may annoy some developers, as the state values ​​are not available immediately after the update.

There are two forms of using setState: the object-based approach and the functional approach.

Let’s see both in action. We will understand the problem with object based setState in this process.

The above code, when executed, renders the value and message from the state object and also renders a button.
If you take a look at the click handler, we have two consecutive setState functions that access this.state value.

Since the setState call is asynchronous before the first setState has completed execution, a reference to the second setState may point to the previous value, not the first current updated one.

The above method uses functional parameters in setState.

This can be an arrow function as shown above or a normal ES5 function.

This function takes two parameters as arguments: the first is prevState, and the second is props (if you also need props, which are passed from the parent component). Here we are looking only in prevState.

The above prevState is related to the setState function as it is the last updated state. It will always point to the correct value.

Let’s see the output after a few clicks. You will find that the values ​​are always in sync when you click the second button.

Leave a Reply

Your email address will not be published. Required fields are marked *