APIリファレンス
フック

useFormStatus - This feature is available in the latest Canary

useFormStatus は、最後のフォーム送信のステータス情報を提供するフックです。

const { pending, data, method, action } = useFormStatus();

リファレンス

useFormStatus()

useFormStatus フックは、最後のフォーム送信のステータス情報を提供します。

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

ステータス情報を取得するには、Submit コンポーネントを <form> 内にレンダリングする必要があります。このフックは、フォームがアクティブに送信中かどうかを示す pending プロパティなどの情報を返します。

上記の例では、Submit はこの情報を使用して、フォームの送信中に <button> の押下を無効にしています。

以下の例をご覧ください。

パラメータ

useFormStatus はパラメータを取りません。

戻り値

以下のプロパティを持つ status オブジェクト
  • action: 親要素の <form> の action prop に渡された関数への参照です。親要素の <form> がない場合、このプロパティは null です。action prop に URI 値が指定されている場合、または action prop が指定されていない場合、status.action は null になります。

注意事項

  • useFormStatus Hook は、<form> 内でレンダリングされるコンポーネントから呼び出す必要があります。
  • useFormStatus は、親要素の <form> のステータス情報のみを返します。同じコンポーネントまたは子コンポーネントでレンダリングされた <form> のステータス情報は返しません。

使用方法 （SVGアイコン）

フォーム送信中の保留状態を表示する （SVGアイコン）

フォームの送信中に保留状態を表示するには、<form> でレンダリングされたコンポーネントで useFormStatus Hook を呼び出し、返された pending プロパティを読み取ります。

ここでは、pending プロパティを使用して、フォームが送信中であることを示します。

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

落とし穴

useFormStatus は、同じコンポーネントでレンダリングされた <form> のステータス情報を返しません。（SVGアイコン）

useFormStatus Hook は、親要素の <form> のステータス情報のみを返し、Hook を呼び出している同じコンポーネント、または子コンポーネントでレンダリングされた <form> のステータス情報は返しません。

function Form() {
  // 🚩 `pending` will never be true
  // useFormStatus does not track the form rendered in this component
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

代わりに、<form> 内に配置されたコンポーネント内から useFormStatus を呼び出します。

function Submit() {
  // ✅ `pending` will be derived from the form that wraps the Submit component
  const { pending } = useFormStatus(); 
  return <button disabled={pending}>...</button>;
}

function Form() {
  // This is the <form> `useFormStatus` tracks
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

送信されるフォームデータを読み取る （SVGアイコン）

useFormStatus から返されたステータス情報の data プロパティを使用して、ユーザーが送信しているデータを表示できます。

ここでは、ユーザーがユーザー名をリクエストできるフォームがあります。useFormStatus を使用して、リクエストしたユーザー名を確認する一時的なステータスメッセージを表示できます。

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';

export default function UsernameForm() {
  const {pending, data} = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending}/>
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
    </div>
  );
}

トラブルシューティング ...

status.pending が true になることはありません ...

useFormStatus は、親の <form> のステータス情報のみを返します。

useFormStatus を呼び出すコンポーネントが <form> 内にネストされていない場合、status.pending は常に false を返します。useFormStatus が <form> 要素の子であるコンポーネントで呼び出されていることを確認してください。

useFormStatus は、同じコンポーネントでレンダリングされた <form> のステータスを追跡しません。詳細は落とし穴を参照してください。

... ... (前のページへのリンクと次のページへのリンク。翻訳不要)