why did setState not work in this case?

Question

Please help me, I really dont get it when the value of this.state.isX printed console is always true. Why setState not work in this case. Here is my source code?`

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
      isX: true
    };
  }
  handle(){
    this.setState({value: 'X',isX:!this.state.isX});
    console.log(this.state.isX)
  }
  render() {
    return (
      <button className="square" onClick={() =>{this.handle()}}>
        {this.state.value}
      </button>
    );
  }
}

I tried this code and it is alternating between true and false — illiteratewriter, Mar 19 '18 at 15:29
It toggles as well for me, not sure what kind of issues you are having — iceveda06, Mar 19 '18 at 15:37

score 1 · Accepted Answer · answered Mar 19 '18 at 15:44

It's because setState is asynchronous. Think of it as of Promise:

handle(){
  new Promise((resolve) => {
    setTimeout(() => {
      resolve("success")
    }, 1000)
  }).then(result => {
    console.log(result);
  })
  console.log('this will be printed before "success"')
}

You know that a code declared after the Promise, will execute immediately. The same is with setState.

If you want to be sure code executes after the state was updated use callback function:

handle(){
  this.setState({value: 'X',isX:!this.state.isX}, () => {
    console.log(this.state.isX)
  });
}

Links:

Why setState isn't synchronous.

I have fixed it. Thank you very much. – Nguyễn Lâm Mar 20 '18 at 03:29 — Nguyễn Lâm, Mar 20 '18 at 03:29

Ed Staub · Answer 2 · 2018-03-19T15:58:25.067

0

setState is asynchronous; you can't immediately read back the value set. If you just wait a tick with a timer or something before logging, you'll see everything is fine. At least, I think so.

Reference: setState() does not always immediately update the component. It may batch or defer the update until later.

Also, minor performance nit: don't use arrow functions in render() to bind; instead, always define the handler itself as an arrow function.

edited Mar 19 '18 at 15:58

answered Mar 19 '18 at 15:44

Ed Staub

15,480
3
61
91

Now I know setState is async. Thank you so much. – Nguyễn Lâm Mar 20 '18 at 03:29

why did setState not work in this case?

2 Answers2