React.jsのsetStateが遅い問題

散々言われ続けてきたことだが，自分の備忘録として残しておく．

this.stateを参照してDOMを書き換える

失敗する例

例えば下記のような場合

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
  }

  componentDidMount() {
    this.setState({
      isOpen: true
    })
  }

  click(flg) {
    alert(flg)
  }


  render() {
    return({
      <div onClick={()=>this.click(this.state.isOpen)}>
    })
  }

DOMをクリックした場合に，1回目のクリックではfalse，2回目以降でtrueが表示される． 本当は1回目のクリックでtrueが表示されてほしいが…

成功する例

正しい対処法なのかどうかはさておいて，上記のコードを次のように変更すると良い．

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
  }

  componentDidMount() {
    this.setState({
      isOpen: true
    })
  }

  click(flg) {
    alert(flg)
  }


  render() {
    const isOpen = this.state.isOpen

    return({
      <div onClick={()=>this.click(isOpen)}>
    })
  }

render()内でthis.state.isOpenを変数に外出しにして，その変数をDOMに渡す． こうすることで一回目のクリックでもtrueが表示されるはずだ．

私見

業務でReact.jsを扱う中でハマったので試行錯誤した結果この形になったが，原因や良い対処法についてはっきりしていない…

stateの変更タイミングが意図的に制御されているのだと思うが， そもそもreduxを使っていれば心配いらないのかもしれない．

原因やよりよい方法についてご存知であれば是非コメントにて．