15. useActionState — フォームの結果と送信中を表示する

Server Action は呼べるようになりましたが、ユーザーには「送信できたのか」「処理中なのか」が見えません。React の useActionState フックを使うと、Server Action の戻り値(結果メッセージなど)と送信中かどうかのフラグを画面に表示できます。

useActionState は [結果, フォームに渡すaction, 送信中フラグ] の3つを返します。実務では、送信中はボタンを無効化して「送信中...」と表示し、完了したら「送信しました」と結果を出す、という体験づくりの定番手段です。

つまずきやすいのは Server Action 側の引数です。useActionState 経由で呼ぶ場合、関数は (前回の結果, formData) の2引数になります。FormData が2番目に来ることを忘れると値が取れずに悩むので注意してください。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/contact/form.tsx — フォームの状態を扱うので Client Component
"use client";

import { useActionState } from "react";
import { sendMessage } from "./actions"; // "use server" の関数

export default function ContactForm() {
  // sendMessage は (前回の結果, formData) を受け取る形にする
  const [result, formAction, isPending] = useActionState(sendMessage, null);

  return (
    <form action={formAction}>
      <textarea name="message" />
      <button disabled={isPending}>
        {isPending ? "送信中..." : "送信"}
      </button>
      {result && <p>{result}</p>}
    </form>
  );
}

公式ドキュメントで詳しく ↗