javascript - Is React's setState asynchronous or something?

Question

Hmm. I'm using setState and for some reason the code following it doesn't have access to the new state!

What gives?!

Answer 1

Yeap. It's asynchronous. I'm posting this because this isn't really immediately obvious to new React users.

React "queues" updates to a component's state.

If you need to execute a code block that's dependent on the new state change, pass a callback like so:

getInitialState: function () {
  return {
    isFinalCountdown: false,
  }
}

//blablabla

//then somewhere you got...
this.setState(
  {isFinalCountdown: true},
  function () {//<--- whoa. this solves your all your synchrosity woes!
    console.log(this.state.isFinalCountdown); //true!
  }
);

console.log(this.state.isFinalCountdown); //false!

All of this is in the docs, it's just something that really needs to be reiterated to avoid those common bugs that new React users likely come across.

Check it out: https://facebook.github.io/react/docs/component-api.html#setstate