React 状態管理ライブラリ徹底比較：Immer、MobX、Recoil、Redux、Valtio、Zustand

React アプリケーションの状態管理は、規模やチームの好みによってさまざまなアプローチがあります。ここでは、6つの主要なライブラリ — immer、mobx、recoil、redux、valtio、zustand — を、実際の開発シーンに即して比較します。各ライブラリの設計思想、使い方、再レンダリング挙動、そしてコード例を通じて、あなたのプロジェクトに最適な選択肢を見極めましょう。

🧠 基本的な役割と設計思想

まず、各ライブラリが「何を解決しようとしているか」を整理します。

• immer：不変性を保ちつつ、ミュータブルな記法でオブジェクトを操作できるユーティリティ。単体では状態管理ライブラリではない。
• mobx：プロキシと自動追跡で、リアクティブな状態管理を実現。
• recoil：アトム（最小単位の状態）とセレクタ（派生状態）で構成される、細粒度な状態管理。
• redux：単一ストア、純粋な reducer、明示的なアクションによる、予測可能な状態管理。
• valtio：プロキシベースのリアクティブな状態を、極めてシンプルな API で提供。
• zustand：グローバル状態をカスタムフックで提供し、Context API の罠を回避。

✍️ 状態の更新方法：ミュータブル vs イミュータブル vs リアクティブ

immer：イミュータブルだけど「ミュータブルに書ける」

immer は produce 関数を使って、イミュータブルな更新を「ミュータブルに見える」記法で書けます。

import { produce } from 'immer';

const nextState = produce(currentState, draft => {
  draft.user.name = 'Alice'; // 実際には新しいオブジェクトが作られる
});

これは Redux や Zustand と組み合わせて使われることが多いです。

mobx：完全にミュータブル、でも自動追跡

mobx では状態を直接変更できます。変更を検知して自動で再レンダリングされます。

import { makeAutoObservable } from 'mobx';

class Store {
  user = { name: 'Bob' };
  constructor() {
    makeAutoObservable(this);
  }
  updateName(name) {
    this.user.name = name; // 直接代入
  }
}

recoil：イミュータブル更新、ただし setter で抽象化

Recoil は set 関数で状態を更新します。古い値を引数に取る関数形式もサポート。

import { atom, useSetRecoilState } from 'recoil';

const userState = atom({ key: 'user', default: { name: 'Charlie' } });

function Component() {
  const setUser = useSetRecoilState(userState);
  const handleClick = () => {
    setUser(prev => ({ ...prev, name: 'David' }));
  };
}

redux：純粋関数でイミュータブル更新

Redux では reducer が純粋関数でなければならず、常に新しい状態を返す必要があります。

// reducer
const userReducer = (state = { name: 'Eve' }, action) => {
  if (action.type === 'UPDATE_NAME') {
    return { ...state, name: action.payload };
  }
  return state;
};

// dispatch
store.dispatch({ type: 'UPDATE_NAME', payload: 'Frank' });

valtio：プロキシで直接操作、でも安全に読み取り

Valtio では状態オブジェクトを直接変更できますが、React 側では useSnapshot で安全に参照します。

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ user: { name: 'Grace' } });

function Component() {
  const snap = useSnapshot(state);
  const handleClick = () => {
    state.user.name = 'Helen'; // 直接変更
  };
  return <div>{snap.user.name}</div>;
}

zustand：setter でイミュータブル更新（ただし immer と組み合わせ可能）

Zustand は setter 関数で状態を更新します。デフォルトではイミュータブルですが、immer と組み合わせればミュータブル記法も使えます。

import { create } from 'zustand';

const useStore = create(set => ({
  user: { name: 'Ivy' },
  updateUser: (name) => set(state => ({
    user: { ...state.user, name }
  }))
}));

// コンポーネント内
const { user, updateUser } = useStore();
updateUser('Judy');

🔄 再レンダリングの最適化：どのコンポーネントが更新されるか？

immer：再レンダリング制御は委ね先次第

immer 自体は再レンダリングを制御しません。Redux や Zustand と組み合わせた場合、それらの仕組みに従います。

mobx：自動依存追跡で最小限の更新

MobX は observable へのアクセスを自動で追跡し、変更された observable に依存するコンポーネントのみを再レンダリングします。

import { observer } from 'mobx-react-lite';

const UserComponent = observer(() => {
  return <div>{store.user.name}</div>; // store.user.name に依存
});

recoil：アトム単位でのサブスクリプション

Recoil は、コンポーネントが subscribe したアトム（またはセレクタ）が変更されたときだけ再レンダリングされます。

const UserName = () => {
  const name = useRecoilValue(userState); // userState に依存
  return <div>{name}</div>;
};

redux：手動でメモ化が必要

Redux では、useSelector の結果が変わらない限り再レンダリングされませんが、深いオブジェクトの場合は shallowEqual や reselect でメモ化する必要があります。

import { useSelector } from 'react-redux';
import { shallowEqual } from 'react-redux';

const name = useSelector(state => state.user.name, shallowEqual);

valtio：プロキシのプロパティ単位で更新

Valtio は、useSnapshot がアクセスしたプロパティだけを監視し、そのプロパティが変更されたときだけ再レンダリングします。

const snap = useSnapshot(state);
return <div>{snap.user.name}</div>; // user.name だけ監視

zustand：セレクタで部分的な状態を購読

Zustand は useStore(selector) で特定のフィールドだけを購読でき、そのフィールドが変わったときだけ再レンダリングされます。

const name = useStore(state => state.user.name);

🧩 非同期処理と副作用の扱い

immer：非同期処理のサポートなし（委ね先次第）

mobx：アクション内で非同期処理可能

updateUserAsync = flow(function* (id) {
  const user = yield fetchUser(id);
  this.user = user;
});

recoil：セレクタで非同期データ取得

const userQuery = selector({
  key: 'userQuery',
  get: async ({ get }) => {
    const id = get(userIdState);
    const res = await fetch(`/api/user/${id}`);
    return res.json();
  }
});

redux：ミドルウェア（Thunk, Saga）で非同期処理

// Redux Thunk
const fetchUser = (id) => async (dispatch) => {
  const user = await api.getUser(id);
  dispatch({ type: 'SET_USER', payload: user });
};

valtio：非同期処理は通常の async/await で直接書ける

const fetchUser = async (id) => {
  const user = await fetch(`/api/user/${id}`).then(r => r.json());
  state.user = user;
};

zustand：非同期処理はアクション内で直接書ける

const useStore = create(set => ({
  fetchUser: async (id) => {
    const user = await fetch(`/api/user/${id}`).then(r => r.json());
    set({ user });
  }
}));

🛠️ 実際のコード例：ユーザープロフィールの更新

以下は、各ライブラリで「ユーザ名を更新する」機能を実装した最小コードです。

immer + zustand（よくある組み合わせ）

import { create } from 'zustand';
import { produce } from 'immer';

const useStore = create(set => ({
  user: { name: 'Alice' },
  updateName: (name) => set(produce(draft => {
    draft.user.name = name;
  }))
}));

mobx

import { makeAutoObservable } from 'mobx';

class UserStore {
  user = { name: 'Alice' };
  constructor() { makeAutoObservable(this); }
  updateName(name) { this.user.name = name; }
}
const store = new UserStore();

recoil

import { atom, useSetRecoilState } from 'recoil';

const userState = atom({ key: 'user', default: { name: 'Alice' } });

const useUpdateName = () => {
  const setUser = useSetRecoilState(userState);
  return (name) => setUser(prev => ({ ...prev, name }));
};

redux

// slice
const userSlice = createSlice({
  name: 'user',
  initialState: { name: 'Alice' },
  reducers: {
    updateName: (state, action) => {
      state.name = action.payload;
    }
  }
});

valtio

import { proxy } from 'valtio';

const state = proxy({ user: { name: 'Alice' } });

// 更新
state.user.name = 'Bob';

zustand

import { create } from 'zustand';

const useStore = create(set => ({
  user: { name: 'Alice' },
  updateName: (name) => set(state => ({
    user: { ...state.user, name }
  }))
}));

📊 まとめ：各ライブラリの特徴と向き不向き

💡 最終的なアドバイス

• シンプルさと速度が最優先 → zustand または valtio
• 大規模でチーム開発、かつ厳格なトレーサビリティが必要 → redux（+ immer）
• リアクティブで自然な JavaScript の書き方を重視 → mobx または valtio
• 細かい状態単位と派生状態を活用したい → recoil
• 既存の Redux/Zustand で不変性操作が面倒 → immer を追加

どのライブラリも「正解」はありません。あなたのチームのスキルセット、プロジェクトの規模、保守期間、そして「開発体験の好み」を元に、最もストレスなく開発を続けられるものを選んでください。