Reactで状態管理をする際のuseReducerとuseStateの使い分け方

Reactを使ったアプリケーション開発において、状態管理は非常に重要な要素の一つです。Reactでは、クラスコンポーネントでの状態管理にsetStateを使用することが一般的でしたが、関数コンポーネントでの状態管理にはuseStateやuseReducerなどのReact Hooksが利用されるようになりました。本記事では、useReducerとuseStateの使い分け方について解説します。

useStateとは

useStateはReact Hooksの一つで、関数コンポーネントで状態を管理するために使用されます。useStateを使用することで、状態を更新することができます。以下はuseStateの基本的な使い方の例です。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、初期値として0を設定したcountという状態変数を宣言し、setCountを使用してその値を更新しています。setCountは、引数に渡した値で状態を更新する関数です。

useReducerとは

useReducerは、useStateと同様に関数コンポーネントで状態を管理するためのReact Hooksです。useReducerを使用することで、複雑な状態の更新を行うことができます。以下はuseReducerの基本的な使い方の例です。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

この例では、初期状態として{ count: 0 }を設定したinitialStateというオブジェクトを宣言し、re
ducerという関数を定義しています。reducer関数は、stateとactionを受け取り、actionに応じてstateを更新します。

useReducerでは、状態の更新はdispatch関数を使用して行います。dispatch関数には、更新するためのactionを渡します。この例では、+ボタンがクリックされた場合は{ type: 'increment' }、-ボタンがクリックされた場合は{ type: 'decrement' }を渡しています。

使い分け方

useStateとuseReducerは、どちらも状態を管理するためのReact Hooksですが、使い分けが重要です。

useStateは、シンプルな状態の更新に使用されます。useStateを使用することで、状態変数とその状態を更新する関数を宣言することができます。ただし、状態が複雑になると、コードが混乱しやすくなります。

一方、useReducerは、複雑な状態の更新に使用されます。useReducerを使用することで、状態を更新するための関数を定義することができます。これにより、コードがシンプルになります。また、useReducerは、状態の更新が複雑になる場合にも柔軟に対応できます。

useStateとuseReducerの使い分けは、状態の複雑さによって異なります。状態がシンプルであればuseStateを、複雑であればuseReducerを使用することが推奨されています。

まとめ

本記事では、useStateとuseReducerの使い分けについて解説しました。useStateはシンプルな状態の更新に使用され、useReducerは複雑な状態の更新に使用されます。状態の複雑さに応じて使い分けることが重要です。useStateとuseReducerをうまく使い分けて、状態の管理を行いましょう。