React - stateの値を同期的に更新

はじめに

今回はReactのstateについてメモ。setState()でstateの値を更新し、同期的に取得する方法を書いていきます。

結論

↓のようにすると、同期的にstateの値を更新/取得することができます。

import React, { Component } from 'react';

class App extends Component {
  
  constructor(props) {
    super(props);
    // 初期化
    this.state = {
      num: 0,
      multipled: 0,
    };
    console.log('初期値: ' + this.state.num);
  }

  addOne = () => {
    // stateの値を変更
    this.setState({
      num: this.state.num +  1
       // 変更が完了後に実行される
    }, () => this.multipleTwo());
  }

  multipleTwo = () => {
    this.setState({
      multipled: this.state.num * 2
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.addOne}>+1</button>
        <h1>num: { this.state.num }</h1>
        <h1>{this.state.num } ✖️ 2 = { this.state.multipled }</h1>
      </div>
    )
  }
}
export default App;

実行するとこうなります↓。

解説

↑のコードは、numに値を1ずつ足し、multipledでnumを倍にした数値を表示するものです。numの値に1足された値に2を掛けたものをmultipledに入れているので、同期的に処理しないと値がおかしなことになってしまいます。

そもそも、setState()はパフォーマンス向上の目的で非同期で値が変更されますが、それを回避して同期的に処理するにはこのようにsetState()でコールバックを受け取るようにします。

addOne = () => {
  this.setState({
    num: this.state.num +  1
   // コールバック
  }, () => this.multipleTwo());
}

multipleTwo = () => {
  this.setState({
    multipled: this.state.num * 2
  });
}

今回は以上です。