ReactJSにおける状態管理：setState メソッド vs useReducer フック

2024-04-02

ReactJSにおける setState メソッド：なぜ状態は即座に変化しないのか？

状態更新の仕組み

ReactJSは、状態とプロパティに基づいてコンポーネントをレンダリングします。状態はコンポーネント内部のプライベート変数であり、this.state オブジェクトとしてアクセスできます。

setState メソッドは、状態オブジェクトの一部または全部を更新するために使用されます。このメソッドは非同期的に呼び出され、次のサイクルでレンダリングされる前に状態を更新します。

状態更新が即座に行われない理由は、ReactJSがパフォーマンスを最適化するためです。setState メソッドを毎回呼び出すたびにレンダリングを行うと、パフォーマンスが低下します。

代わりに、ReactJSはバッチ処理を使用して状態更新をまとめて処理します。これは、複数の setState メソッド呼び出しが短時間に発生した場合、レンダリングが一度だけ行われることを意味します。

状態更新のタイミング

状態更新が即座に行われないことを理解した上で、いつ setState メソッドを使用すれば良いのか疑問に思うかもしれません。

一般的には、次のいずれかのタイミングで setState メソッドを使用します。

ユーザー入力を受け取った後
非同期処理が完了した後
コンポーネント内部のタイマーによって

状態更新の確認

setState メソッドを使用した後に状態が確実に更新されていることを確認するには、次の方法を使用できます。

コンポーネントの render メソッド内で状態変数を使用する
componentDidUpdate ライフサイクルメソッドを使用する

状態更新が即座に行われない理由は、ReactJSがパフォーマンスを最適化するためです。状態更新のタイミングと確認方法を理解することで、setState メソッドを効果的に使用することができます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleButtonClick = () => {
    // setState メソッドを呼び出す
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    const { count } = this.state;

    // 状態変数はレンダリング時に最新の状態を反映している
    return (
      <div>
        <h1>カウント: {count}</h1>
        <button onClick={this.handleButtonClick}>+</button>
      </div>
    );
  }
}

handleButtonClick メソッドは、ボタンがクリックされたときに呼び出されます。このメソッドは、setState メソッドを使用して count 状態変数を更新します。

render メソッドは、コンポーネントをレンダリングします。このメソッドは、count 状態変数を使用して現在のカウント数を表示します。

setState メソッドは非同期的に呼び出されるため、ボタンをクリックしてもすぐにカウント数が更新されません。次のレンダリングサイクルでカウント数が更新されます。

このコードを実行すると、ボタンをクリックするたびにカウント数が1ずつ増えていくことが確認できます。

サンプルコードを通して、setState メソッドの使用方法と、状態更新が即座に行われない理由を理解することができます。

ReactJSにおける setState メソッドの代替方法

直接状態オブジェクトを更新する

コンストラクタ内など、特定の状況では、直接状態オブジェクトを更新することができます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleButtonClick = () => {
    // 直接状態オブジェクトを更新
    this.state.count++;

    // コンポーネントを再レンダリングする
    this.forceUpdate();
  };

  render() {
    const { count } = this.state;

    return (
      <div>
        <h1>カウント: {count}</h1>
        <button onClick={this.handleButtonClick}>+</button>
      </div>
    );
  }
}

この方法を使用する場合は、以下の点に注意する必要があります。

コンストラクタ内でのみ使用できる
状態オブジェクトを直接変更するため、誤って状態を破壊する可能性がある
forceUpdate メソッドを使用してコンポーネントを再レンダリングする必要がある

useReducer フックは、状態管理をより複雑なロジックで扱う場合に役立ちます。

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  const handleButtonClick = () => {
    // dispatch を使用してアクションを発行する
    dispatch({ type: 'INCREMENT' });
  };

  return (
    <div>
      <h1>カウント: {state.count}</h1>
      <button onClick={handleButtonClick}>+</button>
    </div>
  );
}