CODEWITHSUNDEEP
javascriptasynchronousreactjsstatesynchronous
wle8300
wle8300

Reputation: 2749

Is React's setState asynchronous or something?

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

What gives?!

Upvotes: 3

Views: 545

Answers (1)

wle8300
wle8300

Reputation: 2749

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

Upvotes: 6

Related Questions