🌠

【React/Actions】React19の新機能「Actions」で状態管理をシンプルに! 〜従来手法との比較と実践ガイド〜

2025/01/25に公開

はじめに

こんにちは!菊田佑輔です。先日のReact Tokyo 第一回Meetupで発表した「React 19 Actions」について、Zenn記事用に内容を拡充しました。「コード比較」「実践例」「GitHubリポジトリ」を追加し、初学者でも理解しやすい構成にしています。
当日の様子
当日の登壇している菊田の様子

今回の議題の全体像

(イメージ図: 従来手法 vs Actionsの比較)

従来の課題(具体例付き)

典型的なフォーム処理の実装例

// 従来の実装
function TraditionalForm() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: new FormData(e.target),
      });
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button disabled={loading}>
        {loading ? '送信中...' : '送信'}
      </button>
      {error && <div className="error">{error}</div>}
    </form>
  );
}

従来手法の問題点

課題 影響
コード重複 同じパターンの繰り返し実装
状態管理の複雑化 useState/useEffectの乱用
エラー処理分散 デバッグ困難

上記のコードや表を見てわかるように。これが1つだけの簡単な実装なら全然楽なのですが大規模開発などになってこれが何十個にもなるとちょっとしんどいですよね。
状態管理が比較的楽に済むReactでもこのようなむず痒い点がありました。

React 19 Actionsの核心機能

3つの革新機能

  1. 宣言的フォーム - HTML標準<form>を拡張
  2. 自動状態管理 - ローディング/エラーを自動処理
  3. 楽観的更新(Optimistic Update) - 即時UI反映

Actionsを使った書き換え例

// React 19 Actions実装
async function submitAction(formData) {
  'use server';
  const response = await fetch('/api/submit', {
    method: 'POST',
    body: formData,
  });
  return await response.json();
}

function ActionsForm() {
  return (
    <form action={submitAction}>
      <input name="email" />
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? '送信中...' : '送信'}
    </button>
  );
}

主なメリット比較表

項目 従来 Actions
コード行数 25行 15行
状態管理 手動 自動
エラー処理 分散 集約
更新タイミング 遅延 即時

従来のコードとして例示したコードと見比べるとこのactionsがもたらす恩恵がわかりやすいと思います。このようにReact19のactionsは開発者にとってたくさんの恩恵をもたらせてくれるものでしょう。

実装時のベストプラクティス

段階的導入ガイド

注意事項

  • API要件: ActionsはServer Actions仕様に対応したAPIが必要
  • 移行戦略: useTransitionとの併用推奨
  • 型定義: TypeScriptユーザーは@types/react@19.0.0以上必須

実践GitHubリポジトリ

サンプルコードリポジトリ にて
今回の記事を見て実装して理解したい方に向けてコードの公開を行ったのでぜひご覧ください!
以下、このリポジトリが提供する内容です

/react-19-actions-demo
├── /src
│   ├── /legacy - 従来実装サンプル
│   ├── /actions - Actions実装サンプル
│   └── /tests - テストケース
├── README.md - 実行手順
└── package.json - 依存関係

よくある質問

Q. 既存プロジェクトへの導入は?

A. 段階的移行が可能です:

  1. React 19にアップグレード
  2. 新規コンポーネントから導入
  3. 既存コンポーネントを徐々に移行

Q. 楽観的更新の仕組みは?

// 楽観的更新の実装例
function OptimisticUpdate() {
  const [messages, setMessages] = useState([]);
  
  async function sendMessage(formData) {
    const newMessage = { id: Date.now(), text: formData.get('text') };
    setMessages(prev => [...prev, newMessage]); // 即時反映
    
    try {
      await persistMessage(newMessage);
    } catch (error) {
      setMessages(prev => prev.filter(m => m.id !== newMessage.id));
    }
  }
  
  return <form action={sendMessage}>...</form>;
}

まとめ

React 19 Actionsがもたらす変化:

  • 開発効率↑:定型コードを削減
  • 保守性↑:状態管理を集約
  • UX↑:楽観的更新で高速応答

「Do More with Less」の精神で、よりクリーンで効率的なReact開発を実現しましょう!
また、この記事と連動するGitHubリポジトリには、実際に動作確認可能なコードとテストケースを用意しています。READMEに記載の手順に従って、Actionsの挙動を実際に体験してみてください!


📚 さらに学ぶ:

Discussion