React 19 Server Actions 最適化 — useActionState と useFormStatus の実装パターン 2026

50字で結論

useActionState で状態遷移をサーバーへ寄せ、useFormStatus で送信中UIを制御する。これで重複送信と不整合表示を抑えられる。

React 19 の Server Actions は、クライアントで持つ状態を減らし、フォーム処理をサーバーアクションの結果として構造化する実装です。実務では「状態分散」を止めることが最重要ポイントとなります。

1. useActionState の基本

useActionState はアクション関数と初期値を渡すと state formAction pending を返します。

const [state, formAction, pending] = useActionState(updateProfile, { ok: false, message: '', fieldErrors: {}, globalErrors: [], })

• state: サーバー応答の正規化データ
• formAction:
  へ紐付け
• pending: 送信中フラグ

これにより、複数の useState を減らして保守性を高める。

2. 実践パターン: 1つのエラースキーマ

// 共通の戻り値 type ActionState = { ok: boolean message: string fieldErrors: Record globalErrors: string[] }

fieldErrors は入力単位、globalErrors はシステムエラーなどの全体エラーを保持。これで UI 側の分岐が減る。

3. useFormStatus と送信体験

useFormStatus はフォームコンテキスト内の pending 状態を読むだけです。

'use client' import { useFormStatus } from 'react-dom'

function SubmitButton() { const { pending } = useFormStatus() return {pending ? '送信中' : '送信する'} }

コンポーネントがフォーム外にあると意味がありません。

4. 実戦パターン: 重複送信対策

1. 1pending でボタンを無効化
2. 2hidden field に idempotency token を持たせる
3. 3サーバー側で token 重複を拒否
4. 4重複時は明確なエラー文を返却

EC カート、予約、クーポン発行の入力画面で特に有効です。

5. 実戦インサイト

運用で一番効くのは、ActionState をチーム内で契約化することです。キー構造を固定すると、国際化やデザイン変更が入ってもロジック差分が少なく、レビュー工数も削減されます。

6. 導入チェック

• スキーマを共通化する
• useFormStatus はフォーム内に限定する
• pending が見えるボタンを設置する
• トークンで idempotency を実装する
• 重複送信のメトリクスを監視する

FAQ

Q1. まずどのフォームから移行する？ A1. 収益影響が大きいフォームを優先すると効果が見えやすいです。

Q2. 既存 API Route は捨てる必要は？ A2. いいえ。段階移行が実用的です。

Q3. pending が動かない場合の原因は？ A3. フォームツリーと formAction の紐付けを再確認します。

Q4. i18n の文字列差分で壊れないか？ A4. ActionState のキーを固定し、文面だけ翻訳すれば壊れにくいです。

Q5. SEO への影響は？ A5. タイトル・説明・内部リンクを維持すれば大きくはありません。

Q6. いつ成功率を確認する？ A6. 48時間のログを観測し、重複率が低下しているか見る。

Q7. どう測定する？ A7. P95 応答時間、重複送信率、初回成功率を主軸にします。

関連リンク

• Next.js 15 App Router 性能チューニング
• Server Components 実践移行
• Cloudflare D1 比較ガイド
• Cloudflare Workers AI 比較

参考リンク

• https://react.dev/reference/react-dom/hooks/useActionState
• https://react.dev/reference/react-dom/hooks/useFormStatus
• https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations