はじめに

Reactで状態管理を行う際、useStateとuseReducerのどちらを使うべきか迷ったことはありませんか。両方とも状態管理のためのフックですが、それぞれ適した場面が異なります。

この記事では、以下の内容を解説します。

useStateとuseReducerの基本的な使い方
2つのフックの違いと特徴
実践的な使い分けの判断基準
具体的なコード例

初心者の方でも理解できるよう、図解を交えながら説明していきますね。

useStateの基本

useStateとは

useStateは、コンポーネント内でシンプルな状態を管理するための最も基本的なフックです。状態の値と、その値を更新する関数のペアを返します。

基本的な使い方

import { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

構文の説明

useState(0): 初期値を0として状態を初期化
count: 現在の状態値
setCount: 状態を更新するための関数

状態更新は非常にシンプルで、新しい値をsetCountに渡すだけです。

useReducerの基本

useReducerとは

useReducerは、より複雑な状態管理ロジックを扱うためのフックです。Reduxに似た考え方で、アクションに基づいて状態を更新します。

基本的な使い方

import { useReducer } from 'react';

// Reducer関数: 現在の状態とアクションを受け取り、新しい状態を返す
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      return state;
  }
}

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

  return (
    <div>
      <p>カウント: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        +1
      </button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>
        -1
      </button>
      <button onClick={() => dispatch({ type: 'RESET' })}>
        リセット
      </button>
    </div>
  );
}

構文の説明

counterReducer: 状態更新のロジックを定義する関数
state: 現在の状態
dispatch: アクションを送信する関数
action: 状態をどのように変更するかを指示するオブジェクト

2つのフックの違い

状態更新の仕組みの違い

コードの複雑さの比較

useState

状態更新ロジックがコンポーネント内に分散する
シンプルな状態には最適
コード量が少ない

useReducer

状態更新ロジックが1箇所に集約される
複雑な状態管理に向いている
テストしやすい

使い分けの判断基準

以下の判断フローチャートを参考にしてください。

useStateが適している場面

以下のような場合はuseStateを選択しましょう。

単純な値の管理
- 文字列、数値、真偽値などのプリミティブ型
- 独立した状態
更新ロジックがシンプル
- 単純な代入や計算のみ
- 条件分岐が少ない
状態が1つまたは2つ程度
- 関連性の低い複数の状態

具体例

トグルボタンの開閉状態
入力フィールド1つの値
シンプルなカウンター

useReducerが適している場面

以下のような場合はuseReducerを選択しましょう。

複雑な状態オブジェクト
- ネストした構造
- 複数のプロパティを持つオブジェクト
状態間に依存関係がある
- ある状態の更新が他の状態に影響する
- 複数の状態を同時に更新する必要がある
更新ロジックが複雑
- 多くの条件分岐
- ビジネスロジックが含まれる
状態更新のパターンが多い
- 様々なアクションタイプがある
- 状態更新の再利用性が必要

具体例

フォームの管理（複数の入力項目、バリデーション）
ショッピングカート
複雑なUIコンポーネントの状態

実践例：シンプルなカウンター（useState）

単純な増減だけを行うカウンターはuseStateが適しています。

import { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h2>シンプルなカウンター</h2>
      <p>現在の値: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

このコードのポイント

状態は数値1つだけ
更新ロジックは単純な加算・減算
コードが短く読みやすい

実践例：複雑なフォーム管理（useReducer）

複数の入力項目とバリデーションを持つフォームはuseReducerが適しています。

import { useReducer } from 'react';

// 初期状態
const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isSubmitting: false
};

// Reducer関数
function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
        errors: {
          ...state.errors,
          [action.field]: '' // エラーをクリア
        }
      };
    
    case 'SET_ERROR':
      return {
        ...state,
        errors: {
          ...state.errors,
          [action.field]: action.error
        }
      };
    
    case 'SET_SUBMITTING':
      return {
        ...state,
        isSubmitting: action.value
      };
    
    case 'RESET_FORM':
      return initialState;
    
    default:
      return state;
  }
}

function RegistrationForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (field) => (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field,
      value: e.target.value
    });
  };

  const validateForm = () => {
    let isValid = true;

    if (state.username.length < 3) {
      dispatch({
        type: 'SET_ERROR',
        field: 'username',
        error: 'ユーザー名は3文字以上必要です'
      });
      isValid = false;
    }

    if (!state.email.includes('@')) {
      dispatch({
        type: 'SET_ERROR',
        field: 'email',
        error: '有効なメールアドレスを入力してください'
      });
      isValid = false;
    }

    if (state.password.length < 8) {
      dispatch({
        type: 'SET_ERROR',
        field: 'password',
        error: 'パスワードは8文字以上必要です'
      });
      isValid = false;
    }

    return isValid;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) return;

    dispatch({ type: 'SET_SUBMITTING', value: true });

    // 送信処理（API呼び出しなど）
    try {
      // await submitForm(state);
      console.log('フォーム送信:', state);
      dispatch({ type: 'RESET_FORM' });
    } catch (error) {
      console.error('送信エラー:', error);
    } finally {
      dispatch({ type: 'SET_SUBMITTING', value: false });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>ユーザー登録フォーム</h2>
      
      <div>
        <label>
          ユーザー名:
          <input
            type="text"
            value={state.username}
            onChange={handleChange('username')}
          />
        </label>
        {state.errors.username && (
          <p style={{ color: 'red' }}>{state.errors.username}</p>
        )}
      </div>

      <div>
        <label>
          メールアドレス:
          <input
            type="email"
            value={state.email}
            onChange={handleChange('email')}
          />
        </label>
        {state.errors.email && (
          <p style={{ color: 'red' }}>{state.errors.email}</p>
        )}
      </div>

      <div>
        <label>
          パスワード:
          <input
            type="password"
            value={state.password}
            onChange={handleChange('password')}
          />
        </label>
        {state.errors.password && (
          <p style={{ color: 'red' }}>{state.errors.password}</p>
        )}
      </div>

      <button type="submit" disabled={state.isSubmitting}>
        {state.isSubmitting ? '送信中...' : '登録'}
      </button>
    </form>
  );
}

このコードのポイント

複数の関連する状態をオブジェクトで管理
状態更新のロジックがReducer関数に集約されている
エラー状態と送信状態も統合的に管理
アクションタイプで更新の意図が明確になっている

useStateで実装した場合との比較

もしuseStateで同じフォームを実装すると、以下のようになります。

// useStateの場合（推奨されない例）
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);

// 複数のsetState呼び出しが必要
const handleChange = (field) => (e) => {
  if (field === 'username') setUsername(e.target.value);
  if (field === 'email') setEmail(e.target.value);
  if (field === 'password') setPassword(e.target.value);
  
  // エラーもクリアする必要がある
  setErrors({ ...errors, [field]: '' });
};

状態が増えるほど管理が煩雑になることが分かりますね。

パフォーマンスの考慮点

再レンダリングの影響

useStateとuseReducerのどちらも、状態が更新されるとコンポーネントが再レンダリングされます。パフォーマンスの観点では、両者に大きな差はありません。

useCallbackとの組み合わせ

子コンポーネントに状態更新関数を渡す場合、useCallbackと組み合わせることで不要な再レンダリングを防げます。

import { useReducer, useCallback } from 'react';

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

  // dispatchは安定した参照を持つため、useCallbackは不要
  // しかし、追加のロジックを含む関数はメモ化が有効
  const handleIncrement = useCallback(() => {
    dispatch({ type: 'INCREMENT' });
  }, []);

  return <Child onIncrement={handleIncrement} />;
}

まとめ

使い分けのポイント再確認

useStateを選ぶ場合

単純な値の管理
独立した状態
更新ロジックがシンプル
素早くプロトタイプを作りたい時

useReducerを選ぶ場合

複雑な状態オブジェクト
複数の関連する状態
状態更新のロジックが複雑
テストしやすさが重要
状態更新のパターンが多い