状態管理

状態管理とは

状態管理 (State Management) は、フロントエンドアプリケーションの UI の状態 (ユーザー入力、API レスポンス、表示/非表示) を一元的に管理する手法である。コンポーネント間でデータを共有し、状態の変更を予測可能にする。

状態の種類

状態の種類を以下にまとめる。

種類	例	管理方法
ローカル状態	フォーム入力、モーダルの開閉	useState
グローバル状態	ログインユーザー、テーマ	Context, Zustand
サーバー状態	API レスポンス、キャッシュ	TanStack Query
URL 状態	ページ、フィルター、ソート	URL パラメータ

React の状態管理ツール

React の状態管理ツールを以下に示す。

ツール	特徴	適するケース
useState	React 組み込み	ローカル状態
useContext	React 組み込み、プロップドリリング解消	テーマ、認証
Zustand	軽量、シンプル API	中規模アプリ
Jotai	アトミック、ボトムアップ	細粒度の状態管理
Redux Toolkit	大規模、DevTools	大規模アプリ
TanStack Query	サーバー状態専用	API キャッシュ

useState (ローカル状態)

useState (ローカル状態) のコード例を示す。

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Zustand (グローバル状態)

Zustand (グローバル状態) のコード例を示す。

import { create } from 'zustand';

const useStore = create<{ user: User | null; login: (u: User) => void }>((set) => ({
  user: null,
  login: (user) => set({ user }),
}));

// コンポーネントで使用
function Header() {
  const user = useStore(state => state.user);
  return <div>{user?.name ?? 'Guest'}</div>;
}

TanStack Query (サーバー状態)

TanStack Query (サーバー状態) のコード例を示す。

function UserList() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 5 * 60 * 1000, // 5分間キャッシュ
  });

  if (isLoading) return <div>Loading...</div>;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

TanStack Query はサーバー状態のキャッシュ、再取得、楽観的更新を自動化する。API レスポンスを Zustand や Redux で管理する必要がなくなる。

選択基準

選択基準を図で示す。

ローカル状態 → useState
  ↓ 複数コンポーネントで共有
グローバル状態 → Zustand (シンプル) or Redux (大規模)
  ↓ API レスポンスのキャッシュ
サーバー状態 → TanStack Query

より深く学ぶには関連書籍が役立つ。