React での setState メソッドの非同期動作

状態を維持しないと、動的アプリケーションを構築することは不可能であるか、少なくとも非常に困難です。 幸いなことに、React ライブラリのすべてのコンポーネントは、独自の内部状態を持つことができます。

経験の浅い React 開発者は、React の state オブジェクトの複雑な動作を理解していないことがよくあります。 この記事では、いくつかの混乱を解消したいと思います。

React での setState() メソッドの非同期動作

多くの React 開発者は、setState() メソッドが非同期であることを知りません。 アプリケーションに setState() メソッドへの複数の呼び出しがある場合、アプリケーションのパフォーマンスと速度を向上させるためにそれらがまとめてバッチ処理されます。

React チームは、状態の変更がアプリケーションの再レンダリングのトリガーになる可能性があるため、setState() メソッドを非同期にしました。 これは、コンポーネントが setState() メソッドへの複数の個別の呼び出しを持っている場合、バグや無応答につながる可能性があります。

コールバック関数を引数として setState() メソッドに渡す

React では、setState() メソッドを使用して状態オブジェクトを更新します。 多くの React 開発者は、複数の引数を受け入れることができることを知りません。

最初の引数は常に、新しい状態にしたいオブジェクトです。 ただし、2 番目の引数は、状態が更新された直後に実行されるコールバック関数にすることができます。

例を見てみましょう：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "black" };
  }
  render() {
    return (
      <button
        onClick={() =>
          this.setState({ color: "red" }, () => {
            console.log("callback called");
          })
        }
      >
        Update the color
      </button>
    );
  }
}

onClick イベント ハンドラーの値は、このメソッドの呼び出しです。 この場合、最初の引数は既存の状態を置き換えるオブジェクトです。

2 番目の引数では、状態を更新した直後にコールバック関数が実行されます。

この ライブ CodeSandbox デモ に移動できます。 コンソールを開くと、ボタンをクリックすると 'callback called' 文字列がコンソールに出力されることがわかります。

この機能は、状態を更新した直後に特定のアクションを実行する場合に役立ちます。 技術的には、setState() メソッドへの複数の呼び出しをチェーンして、オブジェクトの状態の複数のプロパティを一度に更新できます。 ただし、これを行うためのより良い方法があります。

また、ある状態プロパティが別のプロパティの後に更新されるようにしたい場合は、次の操作を実行できます。

this.setState({color: 'red'}, () => setState{color: 'red', active: true})

この場合、React はまず現在の状態オブジェクトを最初の引数 ({color: "red"}) であるオブジェクトに置き換えます。 この操作が完了すると、コールバック関数が実行され、状態にもう 1つのプロパティが追加されます。

一度に複数の状態プロパティを更新する

一度に複数の状態プロパティを更新する必要がある場合は、setState() メソッドへの 1 回の呼び出しで実行できます。

前の例から、color 状態プロパティの値を更新し、1 回の setState() 呼び出しで active 状態プロパティを追加する方が簡単です。

this.setState({color: 'red', active: true})