IT 技書の森

状態管理

フロントエンドアプリケーションのデータの流れと状態の変更を一元的に管理する手法

フロントエンドReact

状態管理とは

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

状態の種類

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

React の状態管理ツール

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

useState (ローカル状態)

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

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 (サーバー状態)

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

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

関連用語