React - Updating self-dependent state

Christina Gaitán — Wed, 26 Jun 2019 18:13:06 +0000

In React, sometimes we need to update a state value taking into account the current state.

For example, if we are writing a Poll app and we have a button or another component to update the number of votes, we can do something like this:

incrementVotes = () => {
  const currentVotes = this.state.votes;
  this.setState({
    votes: currentVotes + 1
  });
};

The above code could work, but considering that setState() is an asynchronous function, a better solution is to send a function to setState() as follows:

  incrementVotes = () => {
    this.setState(prevState => {
      return {
        votes: prevState.votes + 1
      };
    });
  };

Update

With the first approach, we have the risk that our state does not update immediately, for example if our votes count is 10 and we have a user that is too fast clicking the button, we could have two calls to incrementVotes() in which the value of this.state.votes is the same and in the end we have a final value of 11 when the correct value should be 12.

Maybe there is a thin probability of this occurring but this is a good way of protecting our application of this kind of bugs.

DEV Community: Christina Gaitán

React - Updating self-dependent state