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

2024-06-21

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 フックの使用が推奨されます。理由は以下の通りです。

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

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

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

サンプルコード：useState フックと setState メソッドの使用例

useState フックを使用した例

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 メソッドを使用した例

この例では、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;

これらの例は、useState フックと setState メソッドの基本的な使用方法を示しています。実際の開発では、状況に応じて適切な方法を選択し、より複雑なステート管理を行うことも可能です。

useReducer フック:

複雑なステートロジックを扱う場合に役立ちます。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>
  );
};