概要

この記事はWano Group Advent Calendar2022 14日目の記事です。
https://qiita.com/advent-calendar/2022/wano-group

WanoでVideo Kicksという
ミュージックビデオをiTunesやApple Music、レコチョクMUSICストア、dミュージック、GYAO!、LINE MUSICなどのビデオ配信ストアで配信/販売できるサービスを開発しています。

私は最近Reactを使い始めたので、useStateとuseReducerの違いと、どちらを使うべきかについて考えていきます。

環境

Vite,React,Typescriptを使用しています。

結論

基本はuseReducerを使った方がよさそう

理由は、stateが想定外の値で更新されることを未然に防ぐ事ができるからです。

ざっくり言うと、両者には以下のような違いがあります。

useState・・・state更新処理を使用する側が、更新方法や値を決める
useReducer・・・使用されるstate更新処理側が、更新方法や値を決める

useReducerであれば、state更新方法をあらかじめ決めておく事ができます。
使用する側はstate更新処理で使用する条件のみ渡せば良いため、極端に言うと更新方法は知る必要がありません。

一方で、useStateではstate更新関数の引数に、更新後の値を直接渡します。
従って、予想外の値が入ってきてエラーとなる可能性があります。

以降では、useState、useReducerのサンプルコードを比較してみます。

useState

まずは、useStateを使用したサンプルコードを以下に示します。
なお比較しやすいように、実装内容は後述のuseReducerのコードに寄せています。
これはMenuTypeという料理の種別を指定することで、今日の献立(state)を更新するコードです。

実装者であるAさんは、updateStateでstateの更新を行うつもりで実装しました。
このつもりというのが重要となります。
また、Aさんは野菜嫌いなので野菜料理を選択した場合はエラーを吐くよう実装しています。

menuState.tsx

import { useState } from "react";

const MenuType = {
  Chicken: "Chicken",
  Beef: "Beef",
  Fish: "Fish",
  Vegetable: "Vegetable"
} as const;

type MenuType = typeof MenuType[keyof typeof MenuType];

type Menu = {
  menu: string
};

const initialState: Menu = {menu: ""};

// 使用される側
const updateState = ({type: action}: {type: MenuType}): Menu => {
  switch (action) {
    case MenuType.Chicken:
      return {menu: "唐揚げ"};
    case MenuType.Beef:
      return {menu:"ハンバーグ"};
    case MenuType.Fish:
      return {menu: "寿司"};
    case MenuType.Vegetable:
      throw new Error("野菜は嫌いです");
    default:
      throw new Error("不正な値です");
  }
}

export const MenuState = () => {
  const [state, setState] = useState(initialState);

  return (
    <>
      <div>
        今日の献立: {state.menu}
      </div>
      <div>
        {/* 使用する側 */}
        <button onClick={() => setState(updateState({type: MenuType.Vegetable}))}>野菜</button>
        <button onClick={() => setState(updateState({type: MenuType.Chicken}))}>鶏</button>
        <button onClick={() => setState(updateState({type: MenuType.Beef}))}>牛</button>
        <button onClick={() => setState(updateState({type: MenuType.Fish}))}>魚</button>
      </div>
    </>
  );
}

野菜選択時は・・・

想定通りエラー吐いてますね！

その後、Bさんが次のような実装を行いました。BさんはAさんの野菜嫌いを知りません。

menuState.tsx


// 省略

export const MenuState = () => {
  const [state, setState] = useState(initialState);

  return (
    <>
      <div>
        今日の献立: {state.menu}
      </div>
      <div>
        {/* 使用する側 */}
        <button onClick={() => setState(updateState({type: MenuType.Vegetable}))}>野菜</button>
        <button onClick={() => setState(updateState({type: MenuType.Chicken}))}>鶏</button>
        <button onClick={() => setState(updateState({type: MenuType.Beef}))}>牛</button>
        <button onClick={() => setState(updateState({type: MenuType.Fish}))}>魚</button>
        {/* ここに追加 */}
        <button onClick={() => setState({menu: "ピーマン"})}>ピーマン</button>
        {/* ここに追加 */}
      </div>
    </>
  );
}

するとどうなるか・・・

野菜の献立を禁止しているにもかかわらず、ピーマンが献立に選ばれてしまいました。
エラーも吐かず、正常な動作です。

これは、AさんはupdateStateでstateの値を切り替えているつもりでしたが、
実際はsetStateの引数でstateを更新することになるので起こっています。

このようにuseStateでは、実装者にstate更新後の値が委ねられます。
一人や少人数であればよいですが、複数人で実装する際にAさんとBさんのような認識齟齬が発生し、
想定外の値でstateが更新される恐れがあります。

useReducer

次に、useReducerのサンプルコードを以下に示します。

useStateと違うのは、stateの更新処理を

() => dispatch({type: MenuType.Vegetable})

このように呼び出している点です。

menuReducer.tsx

import { useReducer } from "react";

const MenuType = {
  Chicken: "Chicken",
  Beef: "Beef",
  Fish: "Fish",
  Vegetable: "Vegetable"
} as const;

type MenuType = typeof MenuType[keyof typeof MenuType];

type Menu = {
  menu: string
};

const initialState: Menu = {menu: ""};

// 使用される側
const reducer = (prev: Menu, {type: action}: {type: MenuType}): Menu => {
  switch (action) {
    case MenuType.Chicken:
      return {menu: "唐揚げ"};
    case MenuType.Beef:
      return {menu:"ハンバーグ"};
    case MenuType.Fish:
      return {menu: "寿司"};
    case MenuType.Vegetable:
      throw new Error("野菜は嫌いです");
    default:
      throw new Error("不正な値です");
  }
}

export const MenuReducer = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <div>
        今日の献立: {state.menu}
      </div>
      <div>
        {/* 使用する側 */}
        <button onClick={() => dispatch({type: MenuType.Vegetable})}>野菜</button>
        <button onClick={() => dispatch({type: MenuType.Chicken})}>鶏</button>
        <button onClick={() => dispatch({type: MenuType.Beef})}>牛</button>
        <button onClick={() => dispatch({type: MenuType.Fish})}>魚</button>
        {/* ここでエラー */}
        <button onClick={() => dispatch({type: MenuType.GreenPepper})}>ピーマン</button>
        {/* ここでエラー */}
      </div>
    </>
  );
}

さて、Bさんが再びピーマンボタンを実装しようとします。
しかし、IDE(画像はVSCode)の入力補完機能により、dispatchの引数に指定できる値が表示されます。

以下のように、想定外の値を渡そうとした場合はその時点でエラーを表示してくれるため実装時に気づく事ができます。

このように、useReducerでは使用される側（ここではreducer()）がstate更新方法を決めています。
これによって、IDEの入力補完機能を通してBさんに対してstate更新方法を教える事ができます。

まとめ

特に複数人〜大規模開発では、全てのメンバーに正しく利用方法が伝わるような実装が理想的だと考えます。
今回のuseStateのように、一部の実装者しか知らないようなstate更新方法がある場合、それ以外の実装者への説明（野菜は禁止なのでピーマンを実装しないでほしい、など）が必要となってしまいます。

この工数を減らすためにuseReducerは有効な選択肢となると思います。

【React】useStateとuseReducer、使うのはどっち

概要

環境

結論

基本はuseReducerを使った方がよさそう

useState

想定通りエラー吐いてますね！

useReducer

まとめ