React 19のオプティミスティックUIとServer Actionの状態管理をマスターする

ミューテーションのレイテンシを扱うには、これまで、重複する状態変数の維持、逆の遷移の計算、ネットワーク呼び出し失敗時の防御的なクリーンアップロジックの実装などが必要でした。React 19は、Server Actions、useActionState、そしてuseOptimisticを組み合わせることで、このワークフロー全体を再構築しました。クライアントとサーバーの境界を越えて分離された状態ストアを同期させるのではなく、低レイテンシのミューテーション専用に設計されたオーバーレイモデルが提供されています。

この仕組みを効果的に活用するには、遷移がどのようにオプティミスティック更新のライフサイクルを管理するか、黙示的なロールバックをどう防ぐか、そして迅速なユーザー操作をどう安全にシーケンス処理するかの理解が不可欠です。

一時的なオーバーレイアーキテクチャ

のuseOptimisticフックは、正当なベース状態を直接変更しません。代わりに、propsや状態フックから渡された信頼できる唯一の情報源（source-of-truth）を元に、純粋なレデューサーを使用して一時的なビューを計算します。このビューは、非同期アクションがTransitionまたはネイティブのForm Action内で実行されている間のみ厳密にアクティブになります。

React 19では、この一時的な状態の寿命は遷移のライフサイクルと同期します。非同期のServer Actionが解決または拒否された瞬間、Reactは自動的にオプティミスティックなオーバーレイを破棄し、新たに確定したベース状態でツリーを調整（reconcile）します。ミューテーション失敗時に手動でロールバック用のレデューサーを実装する必要はもうありません。

tsx

// React 19.x Client Component
"use client";
import { useOptimistic } from "react";

export function LikeButton({ count, onLike }: { count: number; onLike: () => Promise<void> }) {
  const [optimisticCount, setOptimisticCount] = useOptimistic(
    count,
    (current, update: number) => current + update
  );

  return (
    <button formAction={async () => {
      setOptimisticCount(1);
      await onLike();
    }}>
      Likes: {optimisticCount}
    </button>
  );
}

レデューサーはクライアント側で同期的に実行されるため、ネットワークリクエストの通信中であっても、ユーザーに即座に触覚的なフィードバックを返すことができます。

「黙示的なロールバック」問題の防止

のuseOptimisticによる自動ロールバック機能は技術的には洗練されていますが、本番環境では予期せぬUX上のリスク、すなわち「黙示的なロールバック」を引き起こします。Server Actionがエラーに遭遇すると、Reactは通知なしにオプティミスティックな状態を破棄してしまいます。ユーザーから見れば、作成したばかりのコメントや切り替えたはずの設定が、説明もなく画面上から突然消えてしまうことになります。

プロダクションアプリケーションでは、エラーの深刻度に応じて2つの異なるエラーハンドリング戦略が必要です。

バリデーションエラーや在庫切れ通知のような、想定内のビジネスロジック上の失敗は、未補足の例外として投げるべきではありません。これらはuseActionStateを介して構造化された状態ペイロードとして返してください。これにより、コンポーネントツリーをマウントしたまま、ユーザーに直接分かりやすいフィードバックを表示できます。

データベース切断や権限エラーのような想定外のシステム障害は、明確な例外（hard errors）として投げるべきです。例外が投げられると、保留中のオプティミスティックな遷移はすべて中止され、最寄りのReact Error Boundaryが起動します。これにより、破損したデータが表示されるのを防ぎ、アプリケーションを安全に失敗させることができます。

tsx

// React 19.x mutation state with useActionState
"use client";
import { useActionState, useOptimistic } from "react";
import { updateQuantityAction } from "./actions";

export function CartItem({ item }: { item: { id: string; quantity: number } }) {
  const [state, formAction, isPending] = useActionState(updateQuantityAction, { success: true });
  const [optimisticQty, setQty] = useOptimistic(item.quantity, (_, next: number) => next);

  return (
    <form action={async (formData: FormData) => {
      setQty(Number(formData.get("quantity")));
      await formAction(formData);
    }}>
      <input name="quantity" defaultValue={optimisticQty} disabled={isPending} />
      {state.error && <span className="error-pill">{state.error}</span>}
    </form>
  );
}

Server Actionから構造化された結果を返すことで、オプティミスティックな値がデータベースの真の状態に戻る際、インラインで警告バナーを表示したり、クライアント側でアラートを即座にトリガーしたりすることが可能になります。

アクションのキューイングと操作の安全性

React 19のミューテーション設計におけるもう一つの重要な詳細は、アクション実行の順序です。生のsetOptimisticコールバック内でuseTransitionの呼び出しを行う際、構造的なキューイングを行わないと、高頻度のユーザー操作が競合を起こす可能性があります。ユーザーがボタンを素早く3回クリックした場合、3つの異なる非同期リクエストが並行して送信され、結果として順序が逆転してインターフェースの状態を壊してしまう恐れがあります。

ネイティブのフォームアクション属性とuseActionStateには、標準でシーケンシャル（逐次的）なキューイング機能が備わっています。連続する送信は管理されたパイプライン内で保持され、オプティミスティックな遷移が順番に適用され、サーバーからのレスポンスも決定論的な順序で解決されます。

タスクボードやショッピングカート、投票ボタンのように、素早い連続クリックを許可するインターフェースを設計する場合は、必ずミューテーションハンドラーをuseActionStateまたはフォームアクションのプロパティに紐付けてください。これにより、カスタムのデバウンスライブラリや複雑なネットワークロックを必要とせずに、インターフェースの状態を確実に制御できるようになります。