React19のformタグに関する新機能についてまとめてみる

React 19では、新しいフォーム機能「Form Actions」が追加され、サーバーサイドプロセスの実装がこれまで以上に簡単になりました。

Form Actionsとは？

Form Actionsは、Reactでフォームを送信する際のサーバーサイド処理を簡略化するための機能です。具体的には以下の特徴があります。

関数を直接actionプロパティに指定可能

フォームのactionプロパティに関数を渡すことで、サーバーサイド処理を簡単に統合することができるようになった。

同期・非同期関数のサポート

関数内で同期的な処理や非同期的な処理を自由に組み込むことが可能

FormDataの利用

フォームのデータが引数として渡され、簡単に取得・操作できます。

Form Actionsの主な利点

エンドポイントの作成が不要

これまでのフォーム送信では、バックエンドAPI（例:/api/submit）を用意し、クライアントからデータを送信する必要があった。Form Actionsを使うと、この手間が省ける。

useStateやonChangeの不要化

入力データを状態で管理する必要がなくなり、簡潔なコードを実現できます。

新しいuseFormStatusフックとの連携

フォームの状態（例：pending）を取得するためのフックが提供され、リアルタイムでの状態管理が可能です。

React18以前のコード

React 18以前では、以下のようにフォームの送信処理を実装していました。
1. useStateを用いて入力値を管理。
2. onChangeイベントで状態を更新。
3. サーバーサイド処理を行うエンドポイントを準備。
4. fetch関数などでデータをPOSTリクエストとして送信。

"use client";
import React, { useState } from "react";

export default function Home() {
  const [name, setName] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify({ name }),
    });
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Form Actionsを用いた新しいフォーム送信方法

React 19のForm Actionsでは、上記の手間を大幅に省くことができます。
1. actionプロパティにサーバーサイド関数を指定。
2. 関数内でFormDataを使ってデータを取得。
3. 必要に応じて非同期処理を組み込む。

export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server"; // サーバーサイドで動作する関数
    console.log(formData.get("name")); // フォームデータを取得
  };

  return (
    <form action={formAction}>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}