// useState: 最もシンプル
function ToggleButton() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? 'Close' : 'Open'}
    </button>
  );
}
 
// フォーム入力の管理
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    try {
      await login(email, password);
    } catch (err) {
      setError('ログインに失敗しました');
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="メールアドレス"
      />
      <div className="password-field">
        <input
          type={showPassword ? 'text' : 'password'}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="パスワード"
        />
        <button
          type="button"
          onClick={() => setShowPassword(!showPassword)}
        >
          {showPassword ? '隠す' : '表示'}
        </button>
      </div>
      {error && <p className="error">{error}</p>}
      <button type="submit">ログイン</button>
    </form>
  );
}

// ① バッチ更新の理解
function Counter() {
  const [count, setCount] = useState(0);
 
  // NG: 同じレンダリングサイクル内の値を参照
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1); // count は古い値のまま → 結果: +1
  };
 
  // OK: 関数型アップデートで前の値を参照
  const handleClickCorrect = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1); // prev は更新後の値 → 結果: +2
  };
 
  return <button onClick={handleClickCorrect}>{count}</button>;
}
 
// ② 初期値の遅延初期化
function ExpensiveComponent() {
  // NG: 毎レンダリングで computeExpensiveValue() が実行される
  // （結果は初回のみ使われるが、関数呼び出し自体は毎回行われる）
  const [value, setValue] = useState(computeExpensiveValue());
 
  // OK: 関数を渡すと初回のみ実行される
  const [value2, setValue2] = useState(() => computeExpensiveValue());
 
  return <div>{value2}</div>;
}
 
// ③ オブジェクト状態の更新
function UserProfile() {
  const [user, setUser] = useState({
    name: 'Taro',
    email: 'taro@example.com',
    preferences: {
      theme: 'dark',
      language: 'ja',
    },
  });
 
  // NG: 直接変更（Reactが変更を検知できない）
  const updateThemeBad = () => {
    user.preferences.theme = 'light';
    setUser(user); // 同じ参照なので再レンダリングされない
  };
 
  // OK: イミュータブルに更新
  const updateThemeGood = () => {
    setUser({
      ...user,
      preferences: {
        ...user.preferences,
        theme: 'light',
      },
    });
  };
 
  return <button onClick={updateThemeGood}>テーマ変更</button>;
}

// useReducer: 複雑な状態遷移
type State = { count: number; step: number; history: number[] };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'setStep'; step: number }
  | { type: 'reset' }
  | { type: 'undo' };
 
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        count: state.count + state.step,
        history: [...state.history, state.count],
      };
    case 'decrement':
      return {
        ...state,
        count: state.count - state.step,
        history: [...state.history, state.count],
      };
    case 'setStep':
      return { ...state, step: action.step };
    case 'reset':
      return { count: 0, step: 1, history: [] };
    case 'undo': {
      const previous = state.history[state.history.length - 1];
      if (previous === undefined) return state;
      return {
        ...state,
        count: previous,
        history: state.history.slice(0, -1),
      };
    }
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, {
    count: 0,
    step: 1,
    history: [],
  });
 
  return (
    <div>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>
        +{state.step}
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        -{state.step}
      </button>
      <button onClick={() => dispatch({ type: 'undo' })}>
        元に戻す
      </button>
      <button onClick={() => dispatch({ type: 'reset' })}>
        リセット
      </button>
      <input
        type="number"
        value={state.step}
        onChange={(e) =>
          dispatch({ type: 'setStep', step: Number(e.target.value) })
        }
      />
    </div>
  );
}
 
// useReducer を使うべき場面:
// → 3つ以上の関連する状態
// → 状態遷移のルールが複雑
// → 次の状態が前の状態に依存
// → Undo/Redo が必要
// → テストしやすくしたい（reducerは純粋関数）

// マルチステップフォームの状態管理
type FormData = {
  // Step 1: 基本情報
  firstName: string;
  lastName: string;
  email: string;
  // Step 2: 住所
  postalCode: string;
  prefecture: string;
  city: string;
  address: string;
  // Step 3: 支払い
  cardNumber: string;
  expiryDate: string;
  cvv: string;
};
 
type FormState = {
  currentStep: number;
  data: FormData;
  errors: Partial<Record<keyof FormData, string>>;
  isSubmitting: boolean;
  completedSteps: Set<number>;
};
 
type FormAction =
  | { type: 'UPDATE_FIELD'; field: keyof FormData; value: string }
  | { type: 'SET_ERRORS'; errors: Partial<Record<keyof FormData, string>> }
  | { type: 'NEXT_STEP' }
  | { type: 'PREV_STEP' }
  | { type: 'GO_TO_STEP'; step: number }
  | { type: 'SUBMIT_START' }
  | { type: 'SUBMIT_SUCCESS' }
  | { type: 'SUBMIT_ERROR'; error: string };
 
const initialFormState: FormState = {
  currentStep: 0,
  data: {
    firstName: '',
    lastName: '',
    email: '',
    postalCode: '',
    prefecture: '',
    city: '',
    address: '',
    cardNumber: '',
    expiryDate: '',
    cvv: '',
  },
  errors: {},
  isSubmitting: false,
  completedSteps: new Set(),
};
 
function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        data: { ...state.data, [action.field]: action.value },
        errors: { ...state.errors, [action.field]: undefined },
      };
 
    case 'SET_ERRORS':
      return { ...state, errors: action.errors };
 
    case 'NEXT_STEP':
      return {
        ...state,
        currentStep: Math.min(state.currentStep + 1, 2),
        completedSteps: new Set([
          ...state.completedSteps,
          state.currentStep,
        ]),
      };
 
    case 'PREV_STEP':
      return {
        ...state,
        currentStep: Math.max(state.currentStep - 1, 0),
      };
 
    case 'GO_TO_STEP':
      if (action.step <= state.currentStep || state.completedSteps.has(action.step - 1)) {
        return { ...state, currentStep: action.step };
      }
      return state;
 
    case 'SUBMIT_START':
      return { ...state, isSubmitting: true };
 
    case 'SUBMIT_SUCCESS':
      return { ...state, isSubmitting: false };
 
    case 'SUBMIT_ERROR':
      return {
        ...state,
        isSubmitting: false,
        errors: { ...state.errors },
      };
 
    default:
      return state;
  }
}
 
function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialFormState);
  const { currentStep, data, errors, isSubmitting } = state;
 
  const validateStep = (step: number): boolean => {
    const newErrors: Partial<Record<keyof FormData, string>> = {};
 
    if (step === 0) {
      if (!data.firstName) newErrors.firstName = '名前は必須です';
      if (!data.lastName) newErrors.lastName = '姓は必須です';
      if (!data.email) newErrors.email = 'メールは必須です';
      if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
        newErrors.email = '有効なメールアドレスを入力してください';
      }
    }
 
    if (step === 1) {
      if (!data.postalCode) newErrors.postalCode = '郵便番号は必須です';
      if (!data.prefecture) newErrors.prefecture = '都道府県は必須です';
      if (!data.city) newErrors.city = '市区町村は必須です';
    }
 
    if (step === 2) {
      if (!data.cardNumber) newErrors.cardNumber = 'カード番号は必須です';
      if (!data.expiryDate) newErrors.expiryDate = '有効期限は必須です';
      if (!data.cvv) newErrors.cvv = 'CVVは必須です';
    }
 
    dispatch({ type: 'SET_ERRORS', errors: newErrors });
    return Object.keys(newErrors).length === 0;
  };
 
  const handleNext = () => {
    if (validateStep(currentStep)) {
      dispatch({ type: 'NEXT_STEP' });
    }
  };
 
  const handleSubmit = async () => {
    if (!validateStep(currentStep)) return;
    dispatch({ type: 'SUBMIT_START' });
    try {
      await submitOrder(data);
      dispatch({ type: 'SUBMIT_SUCCESS' });
    } catch (err) {
      dispatch({ type: 'SUBMIT_ERROR', error: '送信に失敗しました' });
    }
  };
 
  return (
    <div>
      <StepIndicator
        currentStep={currentStep}
        completedSteps={state.completedSteps}
        onStepClick={(step) => dispatch({ type: 'GO_TO_STEP', step })}
      />
      {currentStep === 0 && (
        <BasicInfoStep data={data} errors={errors} dispatch={dispatch} />
      )}
      {currentStep === 1 && (
        <AddressStep data={data} errors={errors} dispatch={dispatch} />
      )}
      {currentStep === 2 && (
        <PaymentStep data={data} errors={errors} dispatch={dispatch} />
      )}
      <div className="navigation">
        {currentStep > 0 && (
          <button onClick={() => dispatch({ type: 'PREV_STEP' })}>
            戻る
          </button>
        )}
        {currentStep < 2 ? (
          <button onClick={handleNext}>次へ</button>
        ) : (
          <button onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? '送信中...' : '注文を確定'}
          </button>
        )}
      </div>
    </div>
  );
}

// === 同じ機能を各ライブラリで実装（カウンター + テーマ） ===
 
// --- React Context ---
type ThemeContextType = {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
  count: number;
  increment: () => void;
};
 
const ThemeContext = createContext<ThemeContextType | null>(null);
 
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [count, setCount] = useState(0);
 
  // useMemoでvalueをメモ化しないと、毎レンダリングで
  // 新しいオブジェクトが生成され、全消費者が再レンダリングされる
  const value = useMemo(
    () => ({
      theme,
      toggleTheme: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
      count,
      increment: () => setCount((c) => c + 1),
    }),
    [theme, count]
  );
 
  return (
    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
  );
}
 
// Context の問題: count が変わるとテーマだけ使うコンポーネントも再レンダリング
function ThemeOnlyComponent() {
  const ctx = useContext(ThemeContext);
  // count の変更でもこのコンポーネントは再レンダリングされる！
  return <div className={ctx?.theme}>テーマのみ使用</div>;
}
 
// --- Zustand ---
import { create } from 'zustand';
 
interface AppStore {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
  count: number;
  increment: () => void;
}
 
const useAppStore = create<AppStore>((set) => ({
  theme: 'light',
  toggleTheme: () =>
    set((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    })),
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));
 
// Zustand: セレクターで必要な値だけ取得 → 最小限の再レンダリング
function ThemeOnlyComponentZustand() {
  const theme = useAppStore((state) => state.theme);
  // count が変わってもこのコンポーネントは再レンダリングされない！
  return <div className={theme}>テーマのみ使用</div>;
}
 
// --- Jotai ---
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
const themeAtom = atom<'light' | 'dark'>('light');
const countAtom = atom(0);
 
// 派生アトム
const themeClassAtom = atom((get) => {
  const theme = get(themeAtom);
  return theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-black';
});
 
function ThemeOnlyComponentJotai() {
  const themeClass = useAtomValue(themeClassAtom);
  // countAtom の変更でこのコンポーネントは再レンダリングされない！
  return <div className={themeClass}>テーマのみ使用</div>;
}
 
function CounterJotai() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Count: {count}
    </button>
  );
}

// Context の再レンダリング問題を理解する
 
// NG: 1つのContextに全状態を入れる
const AppContext = createContext<{
  user: User | null;
  theme: Theme;
  notifications: Notification[];
  sidebarOpen: boolean;
} | null>(null);
 
// → notificationsが更新されると、themeだけ使うコンポーネントも再レンダリング
 
// OK: Contextを分割する
const UserContext = createContext<User | null>(null);
const ThemeContext = createContext<Theme>('light');
const NotificationContext = createContext<Notification[]>([]);
const SidebarContext = createContext<{
  isOpen: boolean;
  toggle: () => void;
}>({
  isOpen: false,
  toggle: () => {},
});
 
// さらに良い: 状態と更新関数を分離
const ThemeValueContext = createContext<Theme>('light');
const ThemeDispatchContext = createContext<(theme: Theme) => void>(() => {});
 
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
 
  return (
    <ThemeValueContext.Provider value={theme}>
      <ThemeDispatchContext.Provider value={setTheme}>
        {children}
      </ThemeDispatchContext.Provider>
    </ThemeValueContext.Provider>
  );
}
 
// テーマの値だけ必要なコンポーネント
function ThemedComponent() {
  const theme = useContext(ThemeValueContext);
  // setThemeが変わっても再レンダリングされない
  return <div className={theme}>テーマ適用済み</div>;
}
 
// テーマの変更だけ行うコンポーネント
function ThemeToggle() {
  const setTheme = useContext(ThemeDispatchContext);
  // theme値が変わっても再レンダリングされない
  return <button onClick={() => setTheme('dark')}>ダークモード</button>;
}

// サーバー状態を useState で管理する場合の問題点
function UserListBad() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetchUsers()
      .then((data) => {
        if (!cancelled) {
          setUsers(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, []);
 
  // 問題点:
  // → キャッシュなし（他のコンポーネントで同じデータが必要な場合、再取得が発生）
  // → 自動再検証なし（データが古くなっても気づけない）
  // → リトライロジックなし
  // → ローディング/エラー状態の管理が手動
  // → 重複リクエストの抑制なし
  // → 楽観的更新の実装が困難
  // → Suspense非対応
  // → ウィンドウフォーカス時の再取得なし
 
  return loading ? <Spinner /> : <UserTable users={users} />;
}
 
// TanStack Query で同じことを実現
function UserListGood() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000, // 5分間キャッシュを新鮮とみなす
    retry: 3,
    refetchOnWindowFocus: true,
  });
 
  // 自動で得られる機能:
  // ✓ キャッシュ（他のコンポーネントから同じqueryKeyで取得 → キャッシュから即座に返す）
  // ✓ 自動再検証（staleTime経過後、バックグラウンドで再取得）
  // ✓ リトライ（失敗時に自動リトライ）
  // ✓ ローディング/エラー状態の自動管理
  // ✓ 重複リクエストの自動抑制
  // ✓ ウィンドウフォーカス時の再取得
  // ✓ Suspense対応
 
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <UserTable users={users!} />;
}

// URL状態をuseStateで管理した場合の問題
function SearchPageBad() {
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState('all');
  const [page, setPage] = useState(1);
 
  // 問題:
  // → URLに反映されない → ブックマーク不可
  // → ブラウザの戻る/進むで状態が復元されない
  // → URLをコピーして共有しても検索条件が再現されない
  // → SEO的にも不利
 
  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <CategoryFilter value={category} onChange={setCategory} />
      <Pagination page={page} onChange={setPage} />
    </div>
  );
}
 
// URL状態として管理した場合
function SearchPageGood() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') ?? '';
  const category = searchParams.get('category') ?? 'all';
  const page = Number(searchParams.get('page') ?? '1');
 
  const updateParams = (updates: Record<string, string>) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      Object.entries(updates).forEach(([key, value]) => {
        if (value) {
          next.set(key, value);
        } else {
          next.delete(key);
        }
      });
      return next;
    });
  };
 
  // メリット:
  // ✓ URL: /search?q=react&category=books&page=2
  // ✓ ブックマーク可能
  // ✓ ブラウザの戻る/進むで状態が復元される
  // ✓ URLを共有すれば検索条件が再現される
  // ✓ SSR/SSGでの初期値として利用可能
 
  return (
    <div>
      <SearchInput
        value={query}
        onChange={(q) => updateParams({ q, page: '1' })}
      />
      <CategoryFilter
        value={category}
        onChange={(c) => updateParams({ category: c, page: '1' })}
      />
      <Pagination
        page={page}
        onChange={(p) => updateParams({ page: String(p) })}
      />
    </div>
  );
}
 
// nuqs を使ったより型安全なURL状態管理
import { useQueryState, parseAsInteger, parseAsString } from 'nuqs';
 
function SearchPageNuqs() {
  const [query, setQuery] = useQueryState('q', parseAsString.withDefault(''));
  const [category, setCategory] = useQueryState(
    'category',
    parseAsString.withDefault('all')
  );
  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1));
 
  // nuqs のメリット:
  // ✓ 型安全（parseAsInteger は自動的に数値型）
  // ✓ デフォルト値の指定が簡潔
  // ✓ Next.js App Router との深い統合
  // ✓ サーバーコンポーネントからの初期値渡しに対応
  // ✓ 浅いルーティング（ナビゲーションなしでURL更新）
 
  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <CategoryFilter value={category} onChange={setCategory} />
      <Pagination page={page} onChange={setPage} />
    </div>
  );
}

// 原則①: 状態の最小化 — 計算できる値は状態にしない
 
// NG: 冗長な状態
function CartBad() {
  const [items, setItems] = useState<CartItem[]>([]);
  const [totalPrice, setTotalPrice] = useState(0);     // items から計算可能
  const [itemCount, setItemCount] = useState(0);        // items から計算可能
  const [isEmpty, setIsEmpty] = useState(true);          // items から計算可能
 
  // items を更新するたびに他の3つも同期する必要がある → バグの温床
  const addItem = (item: CartItem) => {
    const newItems = [...items, item];
    setItems(newItems);
    setTotalPrice(newItems.reduce((sum, i) => sum + i.price * i.quantity, 0));
    setItemCount(newItems.reduce((sum, i) => sum + i.quantity, 0));
    setIsEmpty(false);
    // 1つでも更新を忘れると不整合が発生
  };
 
  return <div>{totalPrice}</div>;
}
 
// OK: 1つの状態から導出
function CartGood() {
  const [items, setItems] = useState<CartItem[]>([]);
 
  // 導出値: useMemo で計算（items が変わった時だけ再計算）
  const totalPrice = useMemo(
    () => items.reduce((sum, i) => sum + i.price * i.quantity, 0),
    [items]
  );
  const itemCount = useMemo(
    () => items.reduce((sum, i) => sum + i.quantity, 0),
    [items]
  );
  const isEmpty = items.length === 0; // 軽い計算は useMemo 不要
 
  const addItem = (item: CartItem) => {
    setItems((prev) => [...prev, item]);
    // totalPrice, itemCount は自動で再計算される → 不整合が起きない
  };
 
  return <div>{totalPrice}</div>;
}

// 原則②: Derived State
 
// NG: 同期が必要な冗長な状態
function ProductListBad() {
  const [products, setProducts] = useState<Product[]>([]);
  const [filteredProducts, setFilteredProducts] = useState<Product[]>([]);
  const [sortedProducts, setSortedProducts] = useState<Product[]>([]);
  const [filter, setFilter] = useState('');
  const [sortBy, setSortBy] = useState<'name' | 'price'>('name');
 
  // products, filter, sortBy のどれが変わっても
  // filteredProducts と sortedProducts を手動で更新する必要がある
  useEffect(() => {
    const filtered = products.filter((p) =>
      p.name.toLowerCase().includes(filter.toLowerCase())
    );
    setFilteredProducts(filtered);
  }, [products, filter]);
 
  useEffect(() => {
    const sorted = [...filteredProducts].sort((a, b) =>
      sortBy === 'name'
        ? a.name.localeCompare(b.name)
        : a.price - b.price
    );
    setSortedProducts(sorted);
  }, [filteredProducts, sortBy]);
  // 問題: useEffect の連鎖 → 理解しづらい、バグが生まれやすい
 
  return <ProductGrid products={sortedProducts} />;
}
 
// OK: 導出値として計算
function ProductListGood() {
  const [products, setProducts] = useState<Product[]>([]);
  const [filter, setFilter] = useState('');
  const [sortBy, setSortBy] = useState<'name' | 'price'>('name');
 
  // 状態は3つだけ。表示用データは計算で得る
  const displayProducts = useMemo(() => {
    return products
      .filter((p) => p.name.toLowerCase().includes(filter.toLowerCase()))
      .sort((a, b) =>
        sortBy === 'name'
          ? a.name.localeCompare(b.name)
          : a.price - b.price
      );
  }, [products, filter, sortBy]);
 
  return <ProductGrid products={displayProducts} />;
}

// 原則③: Colocate State（状態を使う場所の近くに配置）
 
// NG: 不必要にグローバルにした状態
// store.ts
const useStore = create<{
  modalOpen: boolean;           // ← 1つのコンポーネントでしか使わない
  tooltipText: string;          // ← 1つのコンポーネントでしか使わない
  dropdownItems: string[];      // ← 1つのコンポーネントでしか使わない
  searchQuery: string;          // ← 実際に共有が必要
  user: User | null;            // ← 実際に共有が必要
}>((set) => ({
  // ...
}));
 
// OK: ローカルにすべきものはローカルに
function Modal() {
  const [isOpen, setIsOpen] = useState(false); // ローカルで十分
  return (
    <>
      <button onClick={() => setIsOpen(true)}>開く</button>
      {isOpen && <ModalDialog onClose={() => setIsOpen(false)} />}
    </>
  );
}
 
// グローバルストアには本当に共有が必要なものだけ
const useStore = create<{
  searchQuery: string;
  user: User | null;
}>((set) => ({
  searchQuery: '',
  user: null,
}));

// 原則④: Props Drilling の許容範囲と代替手段
 
// Props Drilling: 2-3階層は許容
function App() {
  const [user, setUser] = useState<User | null>(null);
  return <Dashboard user={user} />;
}
 
function Dashboard({ user }: { user: User | null }) {
  return <Header user={user} />;
}
 
function Header({ user }: { user: User | null }) {
  return <UserMenu user={user} />;
}
 
// 4階層以上の場合 → コンポジションで解決
// コンポジションパターン: children を使って中間コンポーネントを「飛ばす」
function App() {
  const [user, setUser] = useState<User | null>(null);
  return (
    <Dashboard>
      <Header>
        <UserMenu user={user} />
      </Header>
    </Dashboard>
  );
}
 
function Dashboard({ children }: { children: React.ReactNode }) {
  return <div className="dashboard">{children}</div>;
}
 
function Header({ children }: { children: React.ReactNode }) {
  return <header>{children}</header>;
}
 
// → Dashboard と Header は user を知る必要がない
// → UserMenu だけが user を受け取る
// → Props Drilling が解消される

// 原則⑤: Single Source of Truth
 
// NG: 同じユーザーデータを複数箇所で管理
function App() {
  // ヘッダー表示用
  const [headerUser, setHeaderUser] = useState<User | null>(null);
  // プロフィールページ用
  const [profileUser, setProfileUser] = useState<User | null>(null);
  // 設定ページ用
  const [settingsUser, setSettingsUser] = useState<User | null>(null);
  // → 1つ更新して他を忘れると不整合
 
  return <div>...</div>;
}
 
// OK: TanStack Query でサーバーデータを一元管理
function useCurrentUser() {
  return useQuery({
    queryKey: ['currentUser'],
    queryFn: fetchCurrentUser,
    staleTime: 5 * 60 * 1000,
  });
}
 
// どのコンポーネントから呼んでも同じキャッシュを参照
function Header() {
  const { data: user } = useCurrentUser();
  return <div>{user?.name}</div>;
}
 
function ProfilePage() {
  const { data: user } = useCurrentUser();
  return <div>{user?.email}</div>;
}
 
function SettingsPage() {
  const { data: user } = useCurrentUser();
  const queryClient = useQueryClient();
 
  const updateUser = async (data: Partial<User>) => {
    await api.updateUser(data);
    // キャッシュを無効化 → 全コンポーネントが最新データに
    queryClient.invalidateQueries({ queryKey: ['currentUser'] });
  };
 
  return <UserSettingsForm user={user!} onSave={updateUser} />;
}

// 原則⑥: 不変性（Immutability）
 
// NG: 直接変更
function TodoListBad() {
  const [todos, setTodos] = useState<Todo[]>([]);
 
  const toggleTodo = (id: string) => {
    const todo = todos.find((t) => t.id === id);
    if (todo) {
      todo.completed = !todo.completed; // 直接変更！
      setTodos([...todos]); // スプレッドしても元のオブジェクトは変更済み
    }
  };
 
  return <div>{/* ... */}</div>;
}
 
// OK: イミュータブルに更新
function TodoListGood() {
  const [todos, setTodos] = useState<Todo[]>([]);
 
  const toggleTodo = (id: string) => {
    setTodos((prev) =>
      prev.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
 
  const addTodo = (text: string) => {
    setTodos((prev) => [
      ...prev,
      { id: crypto.randomUUID(), text, completed: false },
    ]);
  };
 
  const removeTodo = (id: string) => {
    setTodos((prev) => prev.filter((todo) => todo.id !== id));
  };
 
  return <div>{/* ... */}</div>;
}
 
// ネストが深い場合は Immer を活用
import { produce } from 'immer';
 
function NestedStateUpdate() {
  const [state, setState] = useState({
    users: {
      byId: {
        '1': {
          name: 'Taro',
          address: {
            city: 'Tokyo',
            zip: '100-0001',
          },
        },
      },
    },
  });
 
  // Immer なし: スプレッドの嵐
  const updateCityManual = () => {
    setState({
      ...state,
      users: {
        ...state.users,
        byId: {
          ...state.users.byId,
          '1': {
            ...state.users.byId['1'],
            address: {
              ...state.users.byId['1'].address,
              city: 'Osaka',
            },
          },
        },
      },
    });
  };
 
  // Immer あり: 直感的な書き方
  const updateCityImmer = () => {
    setState(
      produce((draft) => {
        draft.users.byId['1'].address.city = 'Osaka';
      })
    );
  };
 
  return <div>{/* ... */}</div>;
}

// React の再レンダリングが発生する条件
// 1. state が変更された
// 2. props が変更された
// 3. 親コンポーネントが再レンダリングされた
// 4. コンテキストの値が変更された
 
// 再レンダリングの最適化テクニック
 
// ① React.memo: props が変わらなければ再レンダリングをスキップ
const ExpensiveList = React.memo(function ExpensiveList({
  items,
}: {
  items: Item[];
}) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});
 
// ② useMemo: 計算結果をメモ化
function Dashboard({ orders }: { orders: Order[] }) {
  // orders が変わった時だけ再計算
  const stats = useMemo(() => {
    return {
      total: orders.length,
      revenue: orders.reduce((sum, o) => sum + o.total, 0),
      averageOrder: orders.reduce((sum, o) => sum + o.total, 0) / orders.length,
      byStatus: orders.reduce(
        (acc, o) => {
          acc[o.status] = (acc[o.status] || 0) + 1;
          return acc;
        },
        {} as Record<string, number>
      ),
    };
  }, [orders]);
 
  return (
    <div>
      <StatCard title="総注文数" value={stats.total} />
      <StatCard title="売上" value={stats.revenue} />
      <StatCard title="平均注文額" value={stats.averageOrder} />
    </div>
  );
}
 
// ③ useCallback: コールバックをメモ化
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
 
  // useCallback なし: text が変わるたびに新しい関数が生成
  // → ChildComponent が React.memo でも再レンダリングされる
  const handleClickBad = () => {
    setCount((c) => c + 1);
  };
 
  // useCallback あり: count の変更時のみ新しい関数
  const handleClickGood = useCallback(() => {
    setCount((c) => c + 1);
  }, []);
 
  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <MemoizedChild onClick={handleClickGood} count={count} />
    </div>
  );
}
 
const MemoizedChild = React.memo(function Child({
  onClick,
  count,
}: {
  onClick: () => void;
  count: number;
}) {
  console.log('Child rendered');
  return <button onClick={onClick}>Count: {count}</button>;
});

// 状態の構造がパフォーマンスに与える影響
 
// NG: フラットな巨大配列 → 1つの変更で全体が再レンダリング
function BigListBad() {
  const [items, setItems] = useState<Item[]>(generateItems(10000));
 
  const toggleItem = (id: string) => {
    setItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, selected: !item.selected } : item
      )
    );
    // 10000要素の配列を全部mapして新しい配列を作成
    // → items が新しい参照 → リスト全体が再レンダリング
  };
 
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id} onClick={() => toggleItem(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}
 
// OK: 正規化されたデータ構造 + React.memo
function BigListGood() {
  const [itemsById, setItemsById] = useState<Record<string, Item>>({});
  const [itemIds, setItemIds] = useState<string[]>([]);
 
  const toggleItem = useCallback((id: string) => {
    setItemsById((prev) => ({
      ...prev,
      [id]: { ...prev[id], selected: !prev[id].selected },
    }));
    // 変更されたアイテムのみ新しいオブジェクトが生成される
  }, []);
 
  return (
    <ul>
      {itemIds.map((id) => (
        <MemoizedItem
          key={id}
          id={id}
          item={itemsById[id]}
          onToggle={toggleItem}
        />
      ))}
    </ul>
  );
}
 
const MemoizedItem = React.memo(function ItemRow({
  id,
  item,
  onToggle,
}: {
  id: string;
  item: Item;
  onToggle: (id: string) => void;
}) {
  return (
    <li onClick={() => onToggle(id)}>
      {item.name} {item.selected ? '✓' : ''}
    </li>
  );
});
// → 変更されたアイテムのみ再レンダリング

// 大量リストのパフォーマンス対策: 仮想化
import { useVirtualizer } from '@tanstack/react-virtual';
 
function VirtualizedList({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
 
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50, // 各行の推定高さ（px）
    overscan: 5, // ビューポート外に余分にレンダリングする行数
  });
 
  return (
    <div
      ref={parentRef}
      style={{ height: '400px', overflow: 'auto' }}
    >
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
  // 10000アイテムでも、画面に表示される分（+ overscan）だけレンダリング
  // → DOMノード数を大幅に削減
}

// パターン1: カスタムフックで状態ロジックをカプセル化
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
 
  const toggle = useCallback(() => setValue((v) => !v), []);
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
 
  return { value, toggle, setTrue, setFalse } as const;
}
 
// 使用例
function Sidebar() {
  const { value: isOpen, toggle, setFalse: close } = useToggle(false);
  return (
    <>
      <button onClick={toggle}>メニュー</button>
      {isOpen && <SidebarContent onClose={close} />}
    </>
  );
}
 
// パターン2: useReducer + Context で Domain-Specific な状態管理
type CartState = {
  items: CartItem[];
  discount: number;
};
 
type CartAction =
  | { type: 'ADD_ITEM'; item: Product; quantity: number }
  | { type: 'REMOVE_ITEM'; productId: string }
  | { type: 'UPDATE_QUANTITY'; productId: string; quantity: number }
  | { type: 'APPLY_DISCOUNT'; code: string; discount: number }
  | { type: 'CLEAR' };
 
function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(
        (i) => i.productId === action.item.id
      );
      if (existing) {
        return {
          ...state,
          items: state.items.map((i) =>
            i.productId === action.item.id
              ? { ...i, quantity: i.quantity + action.quantity }
              : i
          ),
        };
      }
      return {
        ...state,
        items: [
          ...state.items,
          {
            productId: action.item.id,
            name: action.item.name,
            price: action.item.price,
            quantity: action.quantity,
          },
        ],
      };
    }
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter((i) => i.productId !== action.productId),
      };
    case 'UPDATE_QUANTITY':
      return {
        ...state,
        items: state.items.map((i) =>
          i.productId === action.productId
            ? { ...i, quantity: action.quantity }
            : i
        ),
      };
    case 'APPLY_DISCOUNT':
      return { ...state, discount: action.discount };
    case 'CLEAR':
      return { items: [], discount: 0 };
  }
}
 
// パターン3: Zustand のスライスパターン
interface UserSlice {
  user: User | null;
  setUser: (user: User | null) => void;
  logout: () => void;
}
 
interface UISlice {
  sidebarOpen: boolean;
  toggleSidebar: () => void;
  theme: 'light' | 'dark';
  setTheme: (theme: 'light' | 'dark') => void;
}
 
interface NotificationSlice {
  notifications: Notification[];
  addNotification: (notification: Notification) => void;
  removeNotification: (id: string) => void;
  clearAll: () => void;
}
 
// スライスを結合
type AppStore = UserSlice & UISlice & NotificationSlice;
 
const useAppStore = create<AppStore>()((...a) => ({
  ...createUserSlice(...a),
  ...createUISlice(...a),
  ...createNotificationSlice(...a),
}));
 
// 各スライスは別ファイルで定義
// stores/userSlice.ts
const createUserSlice: StateCreator<AppStore, [], [], UserSlice> = (set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
});
 
// stores/uiSlice.ts
const createUISlice: StateCreator<AppStore, [], [], UISlice> = (set) => ({
  sidebarOpen: false,
  toggleSidebar: () =>
    set((state) => ({ sidebarOpen: !state.sidebarOpen })),
  theme: 'light',
  setTheme: (theme) => set({ theme }),
});

// React 19 の useActionState
import { useActionState } from 'react';
 
type FormState = {
  error: string | null;
  success: boolean;
};
 
async function submitAction(
  prevState: FormState,
  formData: FormData
): Promise<FormState> {
  const email = formData.get('email') as string;
  const password = formData.get('password') as string;
 
  try {
    await login(email, password);
    return { error: null, success: true };
  } catch (err) {
    return { error: 'ログインに失敗しました', success: false };
  }
}
 
function LoginForm() {
  const [state, action, isPending] = useActionState(submitAction, {
    error: null,
    success: false,
  });
 
  return (
    <form action={action}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      {state.error && <p className="error">{state.error}</p>}
      <button type="submit" disabled={isPending}>
        {isPending ? 'ログイン中...' : 'ログイン'}
      </button>
    </form>
  );
}

// React 19 の useOptimistic
import { useOptimistic, useTransition } from 'react';
 
function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo]
  );
  const [isPending, startTransition] = useTransition();
 
  const addTodo = async (text: string) => {
    const newTodo: Todo = {
      id: crypto.randomUUID(),
      text,
      completed: false,
    };
 
    startTransition(async () => {
      // 楽観的にUIを更新（即座に表示）
      addOptimisticTodo(newTodo);
      // サーバーに送信
      const savedTodo = await api.createTodo(newTodo);
      // サーバーの応答で実際のデータに置き換え
      setTodos((prev) => [...prev, savedTodo]);
    });
  };
 
  return (
    <div>
      <AddTodoForm onAdd={addTodo} />
      <ul>
        {optimisticTodos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

// React 19 の use() フック
import { use, Suspense } from 'react';
 
// Promise を直接読み取る
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  // Suspense が自動で Loading 状態をハンドル
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}
 
function App() {
  const userPromise = fetchUser(1); // Promiseを渡す（awaitしない）
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}
 
// Context を条件付きで読み取る（use は if 文の中で使える）
function ConditionalTheme({ useTheme }: { useTheme: boolean }) {
  // 従来の useContext はトップレベルでしか呼べなかった
  // use() は条件分岐の中で使える
  if (useTheme) {
    const theme = use(ThemeContext);
    return <div className={theme}>テーマ適用</div>;
  }
  return <div>デフォルト</div>;
}

// useReducer のテスト（純粋関数なので簡単）
describe('formReducer', () => {
  const initialState: FormState = {
    currentStep: 0,
    data: { firstName: '', lastName: '', email: '' },
    errors: {},
    isSubmitting: false,
  };
 
  it('should update a field', () => {
    const result = formReducer(initialState, {
      type: 'UPDATE_FIELD',
      field: 'firstName',
      value: 'Taro',
    });
    expect(result.data.firstName).toBe('Taro');
    // エラーがクリアされることも確認
    expect(result.errors.firstName).toBeUndefined();
  });
 
  it('should advance to next step', () => {
    const result = formReducer(initialState, { type: 'NEXT_STEP' });
    expect(result.currentStep).toBe(1);
  });
 
  it('should not go below step 0', () => {
    const result = formReducer(initialState, { type: 'PREV_STEP' });
    expect(result.currentStep).toBe(0);
  });
});
 
// Zustand ストアのテスト
import { act, renderHook } from '@testing-library/react';
 
describe('useCartStore', () => {
  beforeEach(() => {
    // テスト間でストアをリセット
    useCartStore.setState({ items: [], discount: 0 });
  });
 
  it('should add an item to the cart', () => {
    const { result } = renderHook(() => useCartStore());
 
    act(() => {
      result.current.addItem({
        id: '1',
        name: 'テスト商品',
        price: 1000,
      });
    });
 
    expect(result.current.items).toHaveLength(1);
    expect(result.current.items[0].name).toBe('テスト商品');
  });
 
  it('should calculate total correctly', () => {
    const { result } = renderHook(() => useCartStore());
 
    act(() => {
      result.current.addItem({ id: '1', name: '商品A', price: 1000 });
      result.current.addItem({ id: '2', name: '商品B', price: 2000 });
    });
 
    expect(result.current.total).toBe(3000);
  });
});
 
// TanStack Query のテスト
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { renderHook, waitFor } from '@testing-library/react';
 
function createWrapper() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  });
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}
 
describe('useUsers', () => {
  it('should fetch users successfully', async () => {
    // MSW でAPIをモック
    server.use(
      http.get('/api/users', () => {
        return HttpResponse.json([
          { id: '1', name: 'Taro' },
          { id: '2', name: 'Hanako' },
        ]);
      })
    );
 
    const { result } = renderHook(() => useUsers(), {
      wrapper: createWrapper(),
    });
 
    // 初期状態: ローディング
    expect(result.current.isLoading).toBe(true);
 
    // データ取得完了を待つ
    await waitFor(() => {
      expect(result.current.isSuccess).toBe(true);
    });
 
    expect(result.current.data).toHaveLength(2);
    expect(result.current.data![0].name).toBe('Taro');
  });
});