MENU

Asynchronous States

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. Pass a function to setState() if the value depends on the existing state, ie. State appearing on the RHS. The functional update form is itself asynchronous too but will ensure the state gets updated first before proceeding to compute the new state.

// May fail to update.this.setState({
  counter: this.state.counter + this.props.increment,});

// May fail to update.this.setState({
  counter: this.state.counter + this.props.increment,});

// Correctthis.setState((state, props) => ({
  counter: state.counter + props.increment}));

// Correctthis.setState((state, props) => ({
  counter: state.counter + props.increment}));

Refer to 13.2 for another illustration on asynchronous state updates.