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

Answer 1

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.