React 19 開発パターン

概要

Next.js App Router、Server Actions、楽観的 UI、および並行機能に対応した React 19 パターン。クイックリファレンスで API の概要を、Examples でコピー＆ペーストできるパターンを確認できます。

使用時期

• React 19 アプリケーションを Next.js App Router で構築する
• useOptimistic または useTransition で楽観的 UI を実装する
• フォーム検証を備えた Server Actions を作成する
• クラスコンポーネントからフックへの移行
• React Compiler で並行レンダリングを最適化する
• useReducer またはカスタムフックで複雑な状態を管理する
• 非同期操作を Suspense boundaries でラップする

クイックリファレンス

パターン	フック / API	用途
ローカル状態	useState	シンプルなコンポーネント状態
複雑な状態	useReducer	マルチアクション状態マシン
サイドエフェクト	useEffect	サブスクリプション、データフェッチング
共有状態	useContext / createContext	クロスコンポーネントデータ
DOM アクセス	useRef	フォーカス、測定、タイマー
パフォーマンス	useMemo / useCallback	高コスト計算
非緊急更新	useTransition	大規模リストの検索/フィルター
高コスト UI の遅延	useDeferredValue	古い値を表示しながら更新
リソース読み込み	use() (React 19)	レンダー内で Promise とコンテキスト
楽観的 UI	useOptimistic (React 19)	ミューテーション時の即座フィードバック
フォーム状態	useFormStatus (React 19)	子コンポーネント内の保留状態
フォーム状態	useActionState (React 19)	Server アクションの結果
自動メモ化	React Compiler	手動 memo/callback を削除

手順

1. コンポーネントタイプを識別: Server Component または Client Component が必要かを判定
2. フックを選択: 状態管理とサイドエフェクト用の適切なフックを使用
3. Props をタイプ: すべてのコンポーネント props に TypeScript インターフェースを定義
4. 非同期処理を処理: データフェッチングコンポーネントを Suspense boundaries でラップ
5. 最適化: React Compiler または手動メモ化を使用して高コストレンダリング
6. エラーを処理: ErrorBoundary を追加してグレースフルなエラーハンドリング
7. Server Actions を検証: Zod/スキーマ検証を定義し、テスト:
   • 無効な入力を送信 → 拒否を確認
   • 有効な入力を送信 → 成功を確認

例

Server Component とクライアント相互作用

// Server Component (デフォルト) — 非同期、データをフェッチ
async function ProductPage({ id }: { id: string }) {
  const product = await db.product.findUnique({ where: { id } });

  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton productId={product.id} />
    </div>
  );
}

// Client Component — インタラクティビティを処理
'use client';
function AddToCartButton({ productId }: { productId: string }) {
  const [isPending, startTransition] = useTransition();

  const handleAdd = () => {
    startTransition(async () => {
      await addToCart(productId);
    });
  };

  return (
    <button onClick={handleAdd} disabled={isPending}>
      {isPending ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

useOptimistic で即座フィードバック

'use client';
import { useOptimistic } from 'react';

function TodoList({ todos, addTodo }: { todos: Todo[]; addTodo: (t: Todo) => Promise<void> }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, { ...newTodo, pending: true }]
  );

  const handleSubmit = async (formData: FormData) => {
    const newTodo = { id: Date.now(), text: formData.get('text') as string };
    addOptimisticTodo(newTodo);  // 即座な UI 更新
    await addTodo(newTodo);      // 実際のバックエンド呼び出し
  };

  return (
    <form action={handleSubmit}>
      {optimisticTodos.map(todo => (
        <div key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.text}
        </div>
      ))}
      <input type="text" name="text" />
      <button type="submit">Add</button>
    </form>
  );
}

フォーム付き Server Action

// app/actions.ts
'use server';
import { z } from 'zod';
import { revalidatePath } from 'next/cache';

const schema = z.object({
  title: z.string().min(5),
  content: z.string().min(10),
});

export async function createPost(prevState: any, formData: FormData) {
  const parsed = schema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
  });

  if (!parsed.success) {
    return { errors: parsed.error.flatten().fieldErrors };
  }

  await db.post.create({ data: parsed.data });
  revalidatePath('/posts');
  return { success: true };
}

// app/blog/new/page.tsx
'use client';
import { useActionState } from 'react';
import { createPost } from '../actions';

export default function NewPostPage() {
  const [state, formAction, pending] = useActionState(createPost, {});

  return (
    <form action={formAction}>
      <input name="title" placeholder="Title" />
      {state.errors?.title && <span>{state.errors.title[0]}</span>}
      <textarea name="content" placeholder="Content" />
      <button type="submit" disabled={pending}>
        {pending ? 'Publishing...' : 'Publish'}
      </button>
    </form>
  );
}

カスタムフック

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    function handleOnline() { setIsOnline(true); }
    function handleOffline() { setIsOnline(false); }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

非緊急更新用 useTransition

function SearchableList({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const [filteredItems, setFilteredItems] = useState(items);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
    startTransition(() => {
      setFilteredItems(items.filter(i => i.name.toLowerCase().includes(e.target.value.toLowerCase())));
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Filtering...</span>}
      <ul>{filteredItems.map(i => <li key={i.id}>{i.name}</li>)}</ul>
    </div>
  );
}

ベストプラクティス

Server vs Client の判定

• Server Component から始める (ディレクティブは不要)
• 'use client' を追加するのは: フック、ブラウザ API、イベントハンドラーの場合のみ

状態管理

• 状態は最小限に — 派生値を effects ではなくレンダー時に計算
• 複数の関連アクションを持つ状態には useReducer を使用
• 状態を最も近い共通の祖先まで上げる

Effects

• effects は外部システム同期のみに使用
• 常に正しい依存配列を指定
• サブスクリプションとタイマーのためのクリーンアップ関数を返す
• 状態を直接変更しない — 常に新しい参照を作成

パフォーマンス

• React Compiler を使用する場合: 手動の useMemo、useCallback、memo を避ける
• React Compiler がない場合: 高コスト計算に useMemo を、安定したコールバックに useCallback を使用
• 低優先度の状態更新に useTransition を使用
• 安定した ID をリストキーとして使用し、配列インデックスは使用しない

React 19 固有

• use(promise) コンポーネントを Suspense boundaries でラップ
• フォーム-server action 統合に useActionState を使用
• Server Action 入力を検証 — これらは公開エンドポイント
• Server から Client Components にシリアライズ可能なデータを渡す

制約と警告

• Server Components: フック、イベントハンドラー、またはブラウザ API を使用できない
• use() フック: レンダー中にのみ呼び出し可能、コールバックまたは effects では不可
• Server Actions: 'use server' ディレクティブを含める必須、常に入力を検証
• 状態ミューテーション: 状態を直接変更しない — 常に新しい参照を作成
• Effect 依存: useEffect 依存配列にすべての依存を含める
• メモリリーク: useEffect return でサブスクリプションとイベントリスナーを常にクリーンアップ

参考資料

詳細なパターンについては以下のファイルを参照してください:

• references/hooks-patterns.md — useState、useEffect、useRef、useReducer、カスタムフック、一般的な落とし穴
• references/component-patterns.md — Props、合成、状態の上げ方、コンテキスト、複合コンポーネント、エラーバウンダリー
• references/react19-features.md — use()、useOptimistic、useFormStatus、useActionState、Server Actions、Server Components、移行ガイド
• references/performance-patterns.md — React Compiler セットアップ、useMemo、useCallback、useTransition、useDeferredValue、遅延ロード
• references/typescript-patterns.md — 型付き Props、ジェネリックコンポーネント、イベントハンドラー、判別用ユニオン、コンテキスト型付け
• references/learn.md — 基本から高度な React 19 までの段階的学習ガイド
• references/reference.md — すべての React フックおよびコンポーネント API の完全 API リファレンス