⛳

2025年版 Reactの状態管理ライブラリ徹底比較

に公開
React
Redux
状態管理
jotai
Zustand
tech

React.jsの状態管理ライブラリ徹底比較

React アプリ開発では状態管理が必せません。画面間やコンポーネント間でデータを共有するために、さまざまなライブラリが登場しています。2025年現在のトレンドでは、徒来の Redux に加えて軽量な Zustand や Jotai の人気が高まり、Recoil は 2025 年 1 月 2 日にリポジトリがアーカイブされたため新規採用は減りつつあります (React State Management in 2025: What You Actually Need) 。ここでは主要ライブラリを比較し、特徴や向いている用途を紹介します。

各ライブラリの比較表

ライブラリ 特徴 学習コスト パフォーマンス コード量 開発規模向き
Redux Toolkit 予測可能な状態遷移・エコシステム豊富 やや高め 良好 多め 大規模
Zustand 軽量・Hooks ベース 低い とても良い 少ない 小〜中規模
Jotai 原子単位の状態管理 低い 非常に良い 少ない 小〜中規模
MobX リアクティブな自動更新 中 高い 普通 中〜大規模

他にも Valtio や XState、TanStack Query などの選択肢がありますが、ここでは代表的な 4 つに無点を当てます (2025年のReact状態管理、正直どれがいいの？ - Zustand ...) 。

Redux Toolkit

Redux は状態管理ライブラリの代表格で、現在は Redux Toolkit (RTK) が推奨されています。Flux アーキテクチャに基づき、状態の変更が予測可能でデバッグが容易です。

// store.ts  
import { configureStore, createSlice } from '@reduxjs/toolkit';  
 
const counterSlice = createSlice({  
  name: 'counter',  
  initialState: { value: 0 },  
  reducers: {  
    increment: (state) => { state.value += 1 },  
    decrement: (state) => { state.value -= 1 },  
  },  
});  
 
export const { increment, decrement } = counterSlice.actions;  
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });  
 
// Counter.tsx  
import { useSelector, useDispatch } from 'react-redux';  
import { increment, decrement } from './store';  
 
export default function Counter() {  
  const count = useSelector((state: any) => state.counter.value);  
  const dispatch = useDispatch();  
  return (  
    <div>  
      <p>Count: {count}</p>  
      <button onClick={() => dispatch(increment())}>＋</button>  
      <button onClick={() => dispatch(decrement())}>－</button>  
    </div>  
  );  
}

おすすめ用途: 複雑な状態を厳密に管理したい大規模アプリやチーム開発。

Zustand

Zustand はわずか 1KB 未満の軽量ライブラリで、Context を使わずにグローバルステートを構築できます。Hooks との相性が良く、コード量も少なく済みます。

import { create } from 'zustand';  
 
const useCounterStore = create((set) => ({  
  count: 0,  
  increment: () => set((state) => ({ count: state.count + 1 })),  
  decrement: () => set((state) => ({ count: state.count - 1 })),  
}));  
 
export default function Counter() {  
  const { count, increment, decrement } = useCounterStore();  
  return (  
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>＋</button>  
      <button onClick={decrement}>－</button>  
    </div>  
  );  
}

おすすめ用途: シンプルなアプリや小〜中規模サービス。相互接続された状態を集中管理するのに向いています (Top 15 React state management libraries to use in 2025.) 。

Jotai

Jotai は「Atom（原子）」単位で状態を管理するライブラリです。粗粗感の紫小いリアクティビティを実現し、再レンダリングを最小限に抑えられます。

import { atom, useAtom } from 'jotai';  
 
const countAtom = atom(0);  
 
export default function Counter() {  
  const [count, setCount] = useAtom(countAtom);  
  return (  
    <div>  
      <p>Count: {count}</p>  
      <button onClick={() => setCount(count + 1)}>＋</button>  
      <button onClick={() => setCount(count - 1)}>－</button>  
    </div>  
  );  
}

おすすめ用途: 小規模アプリやツール系で、独立した状態の方を管理したいケース。急速に変化するデータの扱いに適しています (Top 15 React state management libraries to use in 2025.) 。

MobX

MobX はリアクティブプログラミングのアプローチを採用しており、状態が変更されると UI が自動的に更新されます。データの依存関係を自動で追跡するため、直感的に使えます。

import { makeAutoObservable } from 'mobx';  
import { observer } from 'mobx-react-lite';  
 
class CounterStore {  
  count = 0;  
  constructor() {  
    makeAutoObservable(this);  
  }  
  increment() { this.count++; }  
  decrement() { this.count--; }  
}  
const store = new CounterStore();  
 
const Counter = observer(() => (  
  <div>  
    <p>Count: {store.count}</p>  
    <button onClick={() => store.increment()}>＋</button>  
    <button onClick={() => store.decrement()}>－</button>  
  </div>  
));  
 
export default Counter;

おすすめ用途: データの変化が多い UI やリアルタイム更新が必要なアプリ。

まとめ

状態管理ライブラリは「どれが最強」というわけではなく、プロジェクトの規模や要件に引いて選ぶことが重要です。2025年現在は軽量な Zustand や Jotai が人気を集めていますが、複雑な大規模アプリでは今なお Redux Toolkit が頼りにされる場面が多いです。アプリの特性に合わせて最適なツールを選抜しましょう。

Discussion