【保存版】Reactステートの操作方法：useState、setState、useReducerを使いこなそう

Reactにおけるステートの変更方法：詳細解説

useState フックの使用

これは、関数コンポーネントでステートを管理するための最も一般的で推奨される方法です。

const [count, setCount] = useState(0);

// ステートの更新
setCount(count + 1);

こちらは、クラスコンポーネントでステートを管理する方法です。

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

  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>カウントアップ</button>
    );
  }
}

どちらの方法が適しているでしょうか？

一般的に、useState フックの使用が推奨されます。理由は以下の通りです。

• クラスコンポーネントの煩雑さを回避できる
  クラスコンポーネントにおける this のバインディングやライフサイクルメソッドの記述が不要になります。
• フックの恩恵を受けられる
  useEffect や useContext など、他のフックと組み合わせた処理が容易です。
• 簡潔で分かりやすい
  関数コンポーネントと相性が良く、ステートの宣言と更新をシンプルに行えます。

ステートの変更に関する注意点

• ステートの更新によってコンポーネントは再レンダリングされます。パフォーマンスを意識する場合は、不要な再レンダリングを避けるように工夫する必要があります。
• ステートの更新は非同期に行われます。setState や setCount を呼び出した直後にステート値が更新されるわけではないことに注意が必要です。
• Reactはステートをイミュータブルな値として扱います。つまり、直接書き換えるのではなく、新しいステートオブジェクトを作成してセットする必要があります。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
};

export default Counter;

この例では、setState メソッドを使用して、入力フィールドに入力された値をコンポーネントのステートに反映し、それを表示するコンポーネントを作成します。

import React, { Component } from 'react';

class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>入力値： {this.state.value}</p>
      </div>
    );
  }
}

export default Input;

複雑なステートロジックを扱う場合に役立ちます。reducer 関数と呼ばれる関数を用いて、ステートの更新処理をカプセル化することができます。

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

// ステートの更新
dispatch({ type: 'INCREMENT' });

Context API

複数のコンポーネント間でステートを共有する場合に有効です。Provider コンポーネントでステートを供給し、useContext フックでそれを消費します。

// Providerコンポーネント
const MyContext = React.createContext({ count: 0 });

const Provider = () => {
  const [count, setCount] = useState(0);
  return (
    <MyContext.Provider value={{ count, setCount }}>
      {/* 子コンポーネント */}
    </MyContext.Provider>
  );
};

// 子コンポーネント
const Child = () => {
  const { count, setCount } = useContext(MyContext);
  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};

Redux

大規模なアプリケーションにおける複雑なステート管理に適しています。単一方向データフローアーキテクチャに基づき、ストア、アクション、レデューサーなどの概念を用いてステートを管理します。

これらの方法は、それぞれ異なるユースケースに適しています。状況に応じて適切な方法を選択することが重要です。