MENU
  1. ホーム
  2. React
  3. React開発でuseStateとuseReducerを使い分ける判断基準を徹底解説

React開発でuseStateとuseReducerを使い分ける判断基準を徹底解説

React

Reactの状態管理において、useStateとuseReducerは頻繁に使用される重要なフックです。しかし、どちらを使うべきか迷う場面に直面したことはありませんか？単純な状態管理にはuseStateが便利ですが、より複雑なロジックや状態を扱う場合はuseReducerが有効です。本記事では、これら二つのフックの特徴と使い分けの判断基準を詳しく解説し、実例を通じてその適用方法を学びます。初心者から上級者まで、Reactの状態管理における最適な選択をサポートする内容となっています。

目次

useStateとは何か


useStateは、Reactで状態を管理するための基本的なフックです。関数コンポーネントでローカルな状態を簡単に扱うことができ、以下のように直感的な記述が可能です。

useStateの基本構文


useStateは、初期値を引数として受け取り、現在の状態値とその状態を更新する関数を返します。

const [state, setState] = useState(initialValue);
  • state: 現在の状態値
  • setState: 状態を更新するための関数

useStateの特徴

  • シンプルな状態管理: 単一の値や簡単な構造の状態に最適です。
  • 使いやすいAPI: 状態の更新が直感的で、関数コンポーネントにすぐ適用できます。
  • 軽量性: 複雑な状態管理が不要な場合に最適です。

使用例: カウンター


useStateを使用して、シンプルなカウンターを実装する例を以下に示します。

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

useStateが適するケース

  • ボタンの押下回数などの単純な状態管理
  • フォーム入力値の管理
  • トグル状態の管理

useStateは、Reactの状態管理の最初の一歩として、シンプルかつ効果的に使用できるフックです。この後、より複雑な状態管理に適したuseReducerとの違いを解説します。

useReducerとは何か


useReducerは、複雑な状態管理に対応するためのReactフックです。Reduxライクなリデューサー関数を利用して、状態とロジックを分離しつつ、管理を効率化します。

useReducerの基本構文


useReducerは、以下のような構文で使用します。

const [state, dispatch] = useReducer(reducer, initialState);
  • state: 現在の状態
  • dispatch: 状態を更新するためのアクションを送信する関数
  • reducer: 状態とアクションを受け取り、新しい状態を返す純粋関数
  • initialState: 状態の初期値

useReducerの特徴

  • 複雑な状態管理に対応: 多くの状態や多岐にわたる更新ロジックを一元管理できます。
  • 明確なロジック: 状態更新がリデューサー関数に集約され、コードの可読性が向上します。
  • 拡張性: 状態更新のパターンが多いアプリケーションでもスケーラブルです。

使用例: Todoリスト


useReducerを利用して、Todoリストを管理する例を示します。

import React, { useReducer } from 'react';

const initialState = [];

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    default:
      throw new Error('Unknown action type');
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(reducer, initialState);

  const addTodo = text => dispatch({ type: 'ADD_TODO', payload: text });
  const toggleTodo = id => dispatch({ type: 'TOGGLE_TODO', payload: id });
  const deleteTodo = id => dispatch({ type: 'DELETE_TODO', payload: id });

  return (
    <div>
      <input
        type="text"
        onKeyDown={e => e.key === 'Enter' && e.target.value.trim() && addTodo(e.target.value)}
        placeholder="Add a new todo"
      />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              onClick={() => toggleTodo(todo.id)}
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

useReducerが適するケース

  • 状態が複雑で、複数の更新ロジックを持つ場合
  • 状態の変更履歴や更新パターンを明確にする必要がある場合
  • 連携する状態が多く、スケールしやすい管理方法が必要な場合

useReducerは、特にアプリケーションが複雑化した際に、状態管理を整理しやすくするための強力なツールです。次のセクションでは、useStateとuseReducerを選ぶ際の基準について説明します。

状況別の選択基準


useStateとuseReducerは、それぞれ異なるシナリオで効果を発揮します。どちらを選ぶべきか迷ったときは、状態の複雑さや更新ロジックの規模に応じた判断が重要です。

useStateを選ぶべきケース


useStateは、シンプルな状態管理を求める状況で最適です。以下の条件が当てはまる場合はuseStateを選びましょう。

状態が単一または少数の場合


状態が単一値（例: カウンター）や、単純なオブジェクト・配列で十分な場合。

例:

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

状態更新ロジックが簡単な場合


状態を変更するロジックが直感的かつ簡単な操作で済む場合。

例:

setCount(prevCount => prevCount + 1);

初心者や短い学習コストを重視する場合


Reactに慣れていない初心者や、コードの簡潔さを優先する場合に適しています。

useReducerを選ぶべきケース


useReducerは、より複雑な状態や更新ロジックを管理する際に効果的です。以下の条件を満たす場合にuseReducerを選択してください。

状態が複雑または多岐にわたる場合


複数の状態を連携して管理する必要がある場合。

例:

const initialState = { count: 0, loading: false };
const [state, dispatch] = useReducer(reducer, initialState);

状態更新ロジックが多段階・多岐にわたる場合


異なるアクション（例: フォームの送信、検証、状態リセット）を扱う場合。

例:

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

ロジックの再利用性やコードのスケーラビリティを重視する場合


コードを整理し、ロジックをリデューサー関数に集約したい場合。

使い分けのポイント

  • 状態が単純で、局所的な場合: useState
  • 状態が複雑で、多数の更新パターンがある場合: useReducer
  • 初期状態のスキーマが単純でない場合: useReducerが有利
  • 状態のライフサイクルが限定的な場合: useStateが適切

状況によって適切なフックを選ぶことで、コードの可読性や保守性を向上させることができます。次に、useStateが特に有効な具体例について解説します。

単純な状態管理に適したuseState


useStateは、Reactでシンプルな状態を管理する際に非常に便利なツールです。特に単一の値や簡単な構造の状態を扱う場合に適しています。このセクションでは、useStateを選択すべき理由と具体例を解説します。

useStateが適する理由

簡単なAPI


useStateの構文は直感的で、状態の読み取りや更新が容易です。初期値を設定するだけで、状態を定義できます。

例:

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

状態がシンプルな場合に最適


単一の数値、文字列、配列、または単純なオブジェクトなどの管理に向いています。ロジックが複雑でない場合は、useStateを使うことでコードが冗長にならずに済みます。

低い学習コスト


Reactの初心者でもすぐに使える簡単な構造で、状態管理を手軽に始められます。

使用例: シンプルなトグル


以下の例は、useStateを使ってトグル状態を管理する方法を示しています。

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => setIsOn(prevState => !prevState);

  return (
    <div>
      <p>{isOn ? 'ON' : 'OFF'}</p>
      <button onClick={toggleSwitch}>Toggle</button>
    </div>
  );
}

export default Toggle;

この例では、isOnという単一の状態を管理しています。ボタンをクリックするたびに状態が切り替わります。

使用例: フォーム入力


useStateは、フォーム入力の状態を管理する際にも便利です。

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  const handleChange = (e) => setName(e.target.value);

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Enter your name"
      />
      <p>Your name is: {name}</p>
    </div>
  );
}

export default Form;

この例では、入力フィールドの値をnameという単一の状態で管理し、入力内容をリアルタイムに表示しています。

複雑な状態には適さない


useStateは単純な状態管理には適していますが、以下のような場合には限界があります。

  • 複数の状態を連携して管理する必要がある場合
  • 更新ロジックが複雑な場合

これらのケースでは、useReducerがより適しています。次のセクションでは、useReducerがどのように複雑な状態管理に役立つかを解説します。

複雑な状態管理に適したuseReducer


useReducerは、複数の状態や複雑なロジックを効率的に管理するために設計されたReactフックです。このセクションでは、useReducerが特に有効なシナリオやその理由を具体例を交えて説明します。

useReducerが適する理由

複数の状態を一元管理できる


複数の状態を持つ場合、それぞれを個別にuseStateで管理すると煩雑になります。useReducerは一つのリデューサー関数でまとめて管理できるため、スケーラブルです。

状態更新ロジックが複雑な場合に有効


if文やswitch文を含む複雑なロジックでも、リデューサー関数に集約することでコードの可読性を向上させます。

スケーラビリティが高い


アプリケーションが大規模化しても、アクションの追加やロジックの変更が容易です。

使用例: カートの状態管理


以下の例は、ECサイトのカート機能をuseReducerで管理する方法です。

import React, { useReducer } from 'react';

const initialState = [];

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, { id: action.payload.id, name: action.payload.name, quantity: 1 }];
    case 'REMOVE_ITEM':
      return state.filter(item => item.id !== action.payload.id);
    case 'INCREMENT_QUANTITY':
      return state.map(item =>
        item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item
      );
    case 'DECREMENT_QUANTITY':
      return state.map(item =>
        item.id === action.payload.id && item.quantity > 1
          ? { ...item, quantity: item.quantity - 1 }
          : item
      );
    default:
      throw new Error('Unknown action type');
  }
}

function CartApp() {
  const [cart, dispatch] = useReducer(cartReducer, initialState);

  const addItem = (id, name) => dispatch({ type: 'ADD_ITEM', payload: { id, name } });
  const removeItem = id => dispatch({ type: 'REMOVE_ITEM', payload: { id } });
  const incrementQuantity = id => dispatch({ type: 'INCREMENT_QUANTITY', payload: { id } });
  const decrementQuantity = id => dispatch({ type: 'DECREMENT_QUANTITY', payload: { id } });

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {cart.map(item => (
          <li key={item.id}>
            {item.name} - Quantity: {item.quantity}
            <button onClick={() => incrementQuantity(item.id)}>+</button>
            <button onClick={() => decrementQuantity(item.id)}>-</button>
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem(Date.now(), 'Sample Item')}>Add Item</button>
    </div>
  );
}

export default CartApp;

この例のポイント

  • カート内の商品追加、削除、数量変更を一つのリデューサーで管理
  • 複雑なロジックもリデューサーに集約し、再利用可能に
  • 状態変更のトリガー（アクション）は明確な命名規則で管理

複雑なフォームの状態管理


useReducerは、複数の入力フィールドを持つフォームの状態管理にも有効です。

const initialState = {
  name: '',
  email: '',
  password: '',
};

function formReducer(state, action) {
  return {
    ...state,
    [action.field]: action.value,
  };
}

function Form() {
  const [formState, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (field, value) => {
    dispatch({ field, value });
  };

  return (
    <form>
      <input
        type="text"
        value={formState.name}
        onChange={e => handleChange('name', e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={formState.email}
        onChange={e => handleChange('email', e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={formState.password}
        onChange={e => handleChange('password', e.target.value)}
        placeholder="Password"
      />
    </form>
  );
}

この例のポイント

  • フォームフィールドごとにuseStateを使用する代わりに、一つのリデューサーで状態を管理
  • 入力値の変更がリデューサーで一元管理され、コードが簡潔

useReducerの限界

  • 状態が単純であれば、useReducerを使うことで逆に冗長になる
  • 初心者には学習コストが高く、複雑な実装が必要になる場合がある

useReducerは、複雑なアプリケーションや状態管理において強力なツールですが、用途に応じた使い分けが重要です。次のセクションでは、useStateを使った実際のアプリケーション例を解説します。

実例: useStateを使ったTodoアプリ


useStateを利用したシンプルなTodoアプリを構築することで、基本的な状態管理の方法を学びます。この例では、タスクの追加、表示、削除といった基本機能を実装します。

アプリの概要

  • 機能: タスクの追加と削除
  • 管理する状態: Todoリスト（配列形式）

コード例


以下は、useStateを活用したTodoアプリのコード例です。

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]); // Todoリストの状態
  const [inputValue, setInputValue] = useState(''); // 入力フィールドの状態

  // タスクを追加する関数
  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue }]);
      setInputValue(''); // 入力フィールドをリセット
    }
  };

  // タスクを削除する関数
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>Todo App</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

コードの解説

状態の管理

  • todos: タスクの配列を管理し、新しいタスクの追加や既存タスクの削除に対応します。
  • inputValue: 入力フィールドの値を管理します。
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');

タスク追加ロジック


新しいタスクをtodos配列に追加する際、スプレッド構文[...]を使って状態を更新します。

setTodos([...todos, { id: Date.now(), text: inputValue }]);

タスク削除ロジック


タスクIDを基準にフィルタリングを行い、該当するタスクを削除します。

setTodos(todos.filter(todo => todo.id !== id));

アプリの動作

  1. タスクを入力: テキストフィールドにタスクを入力します。
  2. タスクを追加: 「Add Task」ボタンをクリックすると、タスクがリストに追加されます。
  3. タスクを削除: 各タスクに表示される「Delete」ボタンをクリックすると、そのタスクが削除されます。

useStateの利点

  • 単一の状態（todosとinputValue）を分けて管理することでコードが簡潔に
  • 状態の更新が直感的で、初心者にも理解しやすい

限界と注意点

  • Todoリストのような単純なアプリではuseStateで十分ですが、機能が増え、状態が複雑になるとuseReducerや他の状態管理ツールが必要になる場合があります。

次のセクションでは、useReducerを使って同じTodoアプリを構築し、複雑な状態管理にどのように対応するかを解説します。

実例: useReducerを使ったTodoアプリ


useReducerを活用して、複雑な状態管理に対応したTodoアプリを構築します。この例では、タスクの追加、削除、完了状態の切り替えといった機能を効率的に実装します。

アプリの概要

  • 機能: タスクの追加、削除、完了状態の切り替え
  • 管理する状態: Todoリスト（配列形式）
  • アクション: タスクを追加、削除、完了状態をトグル

コード例


以下は、useReducerを活用したTodoアプリのコード例です。

import React, { useReducer } from 'react';

const initialState = [];

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        { id: Date.now(), text: action.payload, completed: false },
      ];
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      throw new Error('Unknown action type');
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, initialState);
  const [inputValue, setInputValue] = React.useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      dispatch({ type: 'ADD_TODO', payload: inputValue });
      setInputValue('');
    }
  };

  const deleteTodo = id => dispatch({ type: 'DELETE_TODO', payload: id });

  const toggleTodo = id => dispatch({ type: 'TOGGLE_TODO', payload: id });

  return (
    <div>
      <h1>Todo App with useReducer</h1>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
        placeholder="Enter a task"
      />
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span
              onClick={() => toggleTodo(todo.id)}
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
                cursor: 'pointer',
              }}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

コードの解説

リデューサー関数


リデューサーは、状態とアクションを受け取り、新しい状態を返します。ここでは、以下の3つのアクションを処理します。

  • ADD_TODO: 新しいタスクを追加
  • DELETE_TODO: 指定されたタスクを削除
  • TOGGLE_TODO: タスクの完了状態を切り替え
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        { id: Date.now(), text: action.payload, completed: false },
      ];
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      throw new Error('Unknown action type');
  }
}

アクションのディスパッチ

  • タスクの追加: 入力値をpayloadとしてADD_TODOアクションをディスパッチ
  • タスクの削除: タスクのidをpayloadとしてDELETE_TODOアクションをディスパッチ
  • タスクの完了状態切り替え: 対象タスクのidをpayloadとしてTOGGLE_TODOアクションをディスパッチ
dispatch({ type: 'ADD_TODO', payload: inputValue });
dispatch({ type: 'DELETE_TODO', payload: id });
dispatch({ type: 'TOGGLE_TODO', payload: id });

アプリの動作

  1. タスクの追加: 入力フィールドにタスクを入力して「Add Task」ボタンをクリックすると、タスクがリストに追加されます。
  2. タスクの削除: リストの「Delete」ボタンをクリックすると、そのタスクが削除されます。
  3. タスクの完了状態切り替え: タスク名をクリックすると、完了状態がトグルされます。

useReducerの利点

  • 状態管理のロジックがリデューサーに集約され、コードが整理される
  • 状態更新の流れが明確で、アクションを追加しやすい
  • スケーラブルな設計が可能

限界と注意点

  • 状態が単純な場合はuseStateの方が適している
  • 初学者には学習コストが高い

useReducerは複雑な状態管理で威力を発揮しますが、アプリケーションの規模や用途に応じて適切に選択することが重要です。次のセクションでは、useStateとuseReducerを使用する際のベストプラクティスと注意点を解説します。

ベストプラクティスと注意点


Reactで状態管理を行う際、useStateとuseReducerは用途に応じて適切に使い分けることが重要です。このセクションでは、それぞれのフックを効果的に活用するためのベストプラクティスと注意点を解説します。

useStateのベストプラクティス

シンプルな状態に限定する

  • useStateは、単一の値やシンプルなオブジェクト、配列の状態管理に最適です。
  • 状態が複雑になる場合は、useStateを多用するよりもuseReducerを検討しましょう。

例:

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

更新ロジックは簡潔に保つ

  • 状態更新関数内で複雑なロジックを実行しないようにします。
  • 必要に応じて、カスタム関数を分離してコードを整理します。

useReducerのベストプラクティス

複雑なロジックをリデューサー関数に集約

  • 状態の更新ロジックをリデューサー関数内にまとめることで、コードの可読性と再利用性を向上させます。
  • 明確なアクションタイプを使用して、リデューサーを管理しやすくします。

例:

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'TOGGLE_VISIBILITY':
      return { ...state, isVisible: !state.isVisible };
    default:
      throw new Error('Unknown action type');
  }
}

アクションタイプを定数として管理

  • アクションタイプを定数化することで、リデューサーの保守性が向上します。

例:

const INCREMENT = 'INCREMENT';
const TOGGLE_VISIBILITY = 'TOGGLE_VISIBILITY';

共通の注意点

不要な再レンダリングを防ぐ

  • 状態の変更がコンポーネント全体の再レンダリングを引き起こす可能性があります。
  • 状態を必要最小限に分割するか、React.memoを活用してパフォーマンスを最適化します。

状態のスコープを明確にする

  • 状態がコンポーネント内だけで完結する場合はuseStateやuseReducerを使用します。
  • グローバルな状態が必要な場合は、ReduxやContext APIを検討してください。

初期値を適切に設定

  • 状態の初期値を考慮して設定することで、意図しない動作を防げます。

例:

const [count, setCount] = useState(0); // 初期値を0に設定

使い分けの指針

  • 状態が単純: useState
    例: カウンター、トグル、入力値の管理
  • 状態が複雑: useReducer
    例: フォームのバリデーション、複数の関連する状態の管理

実践例: 状態管理の適切な選択

useStateを使用する例: カウンター

const [count, setCount] = useState(0);
const increment = () => setCount(prev => prev + 1);

useReducerを使用する例: フォームの管理

const initialState = { name: '', email: '' };

function formReducer(state, action) {
  return { ...state, [action.field]: action.value };
}

const [formState, dispatch] = useReducer(formReducer, initialState);

<input
  type="text"
  value={formState.name}
  onChange={(e) => dispatch({ field: 'name', value: e.target.value })}
/>;

まとめ


useStateとuseReducerを適切に使い分けることで、状態管理を簡素化し、アプリケーションのパフォーマンスや可読性を向上させることができます。次のセクションでは、この記事の内容を振り返り、重要なポイントを総括します。

まとめ


本記事では、Reactの状態管理におけるuseStateとuseReducerの使い分けについて詳しく解説しました。

  • useStateは、単純な状態管理に最適で、学習コストが低く、初心者でも直感的に使用可能です。
  • useReducerは、複雑な状態やロジックを整理するのに適しており、スケーラブルなアプリケーション開発に役立ちます。

どちらを使うべきかの判断は、状態の複雑さと更新ロジックの規模に基づきます。適切なフックを選択することで、効率的で保守性の高いReactアプリケーションを構築できます。

React開発の実践を通じて、これらのフックを効果的に使いこなせるようになりましょう。

React
React フロントエンド開発 useReducer useState

コメント

コメントする

目次