Multiple setStates do not accumulate into one update/render...?

Question

I remember how surprised I was when I found out that setState was async. Now I stumbled upon a "strange" behaviour that doesn't fit into my understanding of setState asynchronicity.

Consider a snippet below (for some reason it results in Script Error, here's the external sandbox: https://codesandbox.io/s/zwrvkz74y3):

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      prop1: 1,
      prop2: 2
    };

    setTimeout(this.changeProp1.bind(this), 100);
  }

  componentDidUpdate() {
    console.info("componentDidUpdate called");
  }

  changeProp1() {
    this.setState({ prop1: 2 });
    this.changeProp2();
  }

  changeProp2() {
    this.setState({ prop2: 3 });
  }

  render() {
    const { prop1, prop2 } = this.state;
    return React.createElement('div', null, `prop1: ${prop1}, prop2: ${prop2}`);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(SomeComponent), rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

If you run this and check the console you will see that componentDidUpdate was invoked twice, but shouldn't the setStates accumulate and update the Component just once?

UPDATE: I think my confusion comes from this phrase in the State Updates May Be Asynchronous section on ReactJS website:

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

Answer 1

As linked section of the reference says,

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

It shouldn't update state in batch, at least in React 16.

As extensively explained in related answer by Dan Abramov of React team, the state is currently updated in batch only from event listeners, also on synchronous setState calls in lifecycle hooks (componentDidMount, componentDidUpdate). This is expected to be changed in React 17.

In React 16, unstable_batchedUpdates should be explicitly used to unconditionally update the state in batch (a demo):

setTimeout(() => {
  ReactDOM.unstable_batchedUpdates(() => {
    this.changeProp1();
  });
}, 100);

Answer 2

First you have incorrect seTtimeout notation. It accepts first as function that needs to be called after a particular time. It is recommended to do this after mounting the component. In your case function gets called and doesn't wait for timer you can try this by changing the time to 1000ms. here is correct implementation:

class SomeComponent extends React.Component {


 constructor(props) {
    super(props);
    this.state = {
      prop1: 1,
      prop2: 2
    };
  }

  componentDidMount(){
    setTimeout(()=>{
      this.changeProp1()
    },100);
  }

  componentDidUpdate() {
    console.info("componentDidUpdate called");
  }

Further setState only gets batched for synthetic event like onClick and doesn't re render till the end of handler execution. For setTimeoutand AJAX, states updates aren't batched. here is the more info about setState batch process.