React State Management

モダン React の状態管理パターンの包括的ガイド。ローカルなコンポーネント状態からグローバルストア、サーバー状態の同期まで。

このスキルを使う場面

• React アプリで グローバル状態管理 をセットアップするとき
• Redux Toolkit、Zustand、Jotai のいずれかを選択するとき
• React Query または SWR でサーバー状態を管理するとき
• 楽観的更新を実装するとき
• 状態関連のバグをデバッグするとき
• レガシー Redux からモダンなパターンへ移行するとき

コア概念

1. 状態のカテゴリ

タイプ	説明	ソリューション
ローカル状態	コンポーネント固有の UI 状態	useState、useReducer
グローバル状態	コンポーネント間で共有される状態	Redux Toolkit、Zustand、Jotai
サーバー状態	リモートデータ、キャッシング	React Query、SWR、RTK Query
URL 状態	ルートパラメータ、検索	React Router、nuqs
フォーム状態	入力値、バリデーション	React Hook Form、Formik

2. 選択基準

小規模アプリ、シンプルな状態 → Zustand または Jotai
大規模アプリ、複雑な状態 → Redux Toolkit
サーバーとの重い相互作用 → React Query + 軽量なクライアント状態
アトミック/細粒度の更新 → Jotai

クイックスタート

Zustand (最もシンプル)

// store/useStore.ts
import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface AppState {
  user: User | null
  theme: 'light' | 'dark'
  setUser: (user: User | null) => void
  toggleTheme: () => void
}

export const useStore = create<AppState>()(
  devtools(
    persist(
      (set) => ({
        user: null,
        theme: 'light',
        setUser: (user) => set({ user }),
        toggleTheme: () => set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light'
        })),
      }),
      { name: 'app-storage' }
    )
  )
)

// コンポーネント内での使用
function Header() {
  const { user, theme, toggleTheme } = useStore()
  return (
    <header className={theme}>
      {user?.name}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </header>
  )
}

パターン

パターン 1: Redux Toolkit と TypeScript

// store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import userReducer from "./slices/userSlice";
import cartReducer from "./slices/cartSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
    cart: cartReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ["persist/PERSIST"],
      },
    }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// 型付きフック
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// store/slices/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";

interface User {
  id: string;
  email: string;
  name: string;
}

interface UserState {
  current: User | null;
  status: "idle" | "loading" | "succeeded" | "failed";
  error: string | null;
}

const initialState: UserState = {
  current: null,
  status: "idle",
  error: null,
};

export const fetchUser = createAsyncThunk(
  "user/fetchUser",
  async (userId: string, { rejectWithValue }) => {
    try {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) throw new Error("Failed to fetch user");
      return await response.json();
    } catch (error) {
      return rejectWithValue((error as Error).message);
    }
  },
);

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      state.current = action.payload;
      state.status = "succeeded";
    },
    clearUser: (state) => {
      state.current = null;
      state.status = "idle";
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = "loading";
        state.error = null;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.current = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload as string;
      });
  },
});

export const { setUser, clearUser } = userSlice.actions;
export default userSlice.reducer;

パターン 2: Zustand とスライス (スケーラブル)

// store/slices/createUserSlice.ts
import { StateCreator } from "zustand";

export interface UserSlice {
  user: User | null;
  isAuthenticated: boolean;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

export const createUserSlice: StateCreator<
  UserSlice & CartSlice, // 統合されたストア型
  [],
  [],
  UserSlice
> = (set, get) => ({
  user: null,
  isAuthenticated: false,
  login: async (credentials) => {
    const user = await authApi.login(credentials);
    set({ user, isAuthenticated: true });
  },
  logout: () => {
    set({ user: null, isAuthenticated: false });
    // 他のスライスにアクセス可能
    // get().clearCart()
  },
});

// store/index.ts
import { create } from "zustand";
import { createUserSlice, UserSlice } from "./slices/createUserSlice";
import { createCartSlice, CartSlice } from "./slices/createCartSlice";

type StoreState = UserSlice & CartSlice;

export const useStore = create<StoreState>()((...args) => ({
  ...createUserSlice(...args),
  ...createCartSlice(...args),
}));

// 選択的なサブスクリプション (不要な再レンダリングを防止)
export const useUser = () => useStore((state) => state.user);
export const useCart = () => useStore((state) => state.cart);

パターン 3: Jotai でアトミック状態管理

// atoms/userAtoms.ts
import { atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// 基本的なアトム
export const userAtom = atom<User | null>(null)

// 派生アトム (計算)
export const isAuthenticatedAtom = atom((get) => get(userAtom) !== null)

// localStorage 永続化対応アトム
export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light')

// 非同期アトム
export const userProfileAtom = atom(async (get) => {
  const user = get(userAtom)
  if (!user) return null
  const response = await fetch(`/api/users/${user.id}/profile`)
  return response.json()
})

// 書き込み専用アトム (アクション)
export const logoutAtom = atom(null, (get, set) => {
  set(userAtom, null)
  set(cartAtom, [])
  localStorage.removeItem('token')
})

// 使用例
function Profile() {
  const [user] = useAtom(userAtom)
  const [, logout] = useAtom(logoutAtom)
  const [profile] = useAtom(userProfileAtom) // Suspense 対応

  return (
    <Suspense fallback={<Skeleton />}>
      <ProfileContent profile={profile} onLogout={logout} />
    </Suspense>
  )
}

パターン 4: React Query でサーバー状態管理

// hooks/useUsers.ts
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

// クエリキーファクトリー
export const userKeys = {
  all: ["users"] as const,
  lists: () => [...userKeys.all, "list"] as const,
  list: (filters: UserFilters) => [...userKeys.lists(), filters] as const,
  details: () => [...userKeys.all, "detail"] as const,
  detail: (id: string) => [...userKeys.details(), id] as const,
};

// フェッチフック
export function useUsers(filters: UserFilters) {
  return useQuery({
    queryKey: userKeys.list(filters),
    queryFn: () => fetchUsers(filters),
    staleTime: 5 * 60 * 1000, // 5分
    gcTime: 30 * 60 * 1000, // 30分 (旧 cacheTime)
  });
}

// 単一ユーザーフック
export function useUser(id: string) {
  return useQuery({
    queryKey: userKeys.detail(id),
    queryFn: () => fetchUser(id),
    enabled: !!id, // ID がない場合はフェッチしない
  });
}

// 楽観的更新付きミューテーション
export function useUpdateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateUser,
    onMutate: async (newUser) => {
      // 発行中のリフェッチをキャンセル
      await queryClient.cancelQueries({
        queryKey: userKeys.detail(newUser.id),
      });

      // 前の値をスナップショット
      const previousUser = queryClient.getQueryData(
        userKeys.detail(newUser.id),
      );

      // 楽観的に更新
      queryClient.setQueryData(userKeys.detail(newUser.id), newUser);

      return { previousUser };
    },
    onError: (err, newUser, context) => {
      // エラー時にロールバック
      queryClient.setQueryData(
        userKeys.detail(newUser.id),
        context?.previousUser,
      );
    },
    onSettled: (data, error, variables) => {
      // ミューテーション後にリフェッチ
      queryClient.invalidateQueries({
        queryKey: userKeys.detail(variables.id),
      });
    },
  });
}

パターン 5: クライアント状態 + サーバー状態の結合

// Zustand でクライアント状態を管理
const useUIStore = create<UIState>((set) => ({
  sidebarOpen: true,
  modal: null,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  openModal: (modal) => set({ modal }),
  closeModal: () => set({ modal: null }),
}))

// React Query でサーバー状態を管理
function Dashboard() {
  const { sidebarOpen, toggleSidebar } = useUIStore()
  const { data: users, isLoading } = useUsers({ active: true })
  const { data: stats } = useStats()

  if (isLoading) return <DashboardSkeleton />

  return (
    <div className={sidebarOpen ? 'with-sidebar' : ''}>
      <Sidebar open={sidebarOpen} onToggle={toggleSidebar} />
      <main>
        <StatsCards stats={stats} />
        <UserTable users={users} />
      </main>
    </div>
  )
}

ベストプラクティス

Do's (やるべきこと)

• 状態をコロケート - 状態はそれが使用される場所の近くに保つ
• セレクターを使用 - 選択的なサブスクリプションで不要な再レンダリングを防止
• データを正規化 - ネストされた構造を平坦化して更新を簡単に
• すべてに型を付ける - TypeScript の完全なカバレッジでランタイムエラーを防止
• 関心を分離 - サーバー状態 (React Query) とクライアント状態 (Zustand)

Don'ts (やってはいけないこと)

• グローバル化しすぎない - すべてがグローバル状態である必要はない
• サーバー状態を複製しない - React Query に管理させる
• 直接ミューテートしない - 常にイミュータブルな更新を使う
• 派生データを保存しない - 代わりに計算する
• パラダイムを混ぜない - カテゴリごとに 1 つのプライマリーソリューションを選択

移行ガイド

レガシー Redux から RTK へ

// 前 (レガシー Redux)
const ADD_TODO = "ADD_TODO";
const addTodo = (text) => ({ type: ADD_TODO, payload: text });
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.payload, completed: false }];
    default:
      return state;
  }
}

// 後 (Redux Toolkit)
const todosSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      // Immer が "mutations" を許可
      state.push({ text: action.payload, completed: false });
    },
  },
});