React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利

2023年8月11日

React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。

#React

現在のReact v18.2.0では、まだexperimentalなuseFormStatusを利用すると次のような記述で、重複送信を防ぐボタンを簡単に実装できる。これの良い点は、フォームと実装を分離できている点。

"use client";

import { experimental_useFormStatus as useFormStatus } from "react-dom";

export default function SubmitButton({
  children,
  ...props
}: React.ComponentPropsWithoutRef"button") {
  const { pending } = useFormStatus();

  return (
    button {...props} type="submit" disabled={pending}
      {pending ? "Pending..." : children}
    /button
  );
}

内部実装を見ていないが、祖先要素にあるformの状態を取得している。一方、id属性とform属性を利用して祖先にないform要素とbutton要素を紐づけた場合は、現状のuseFormStatusは利用できない。Providerと同様の挙動をしているように思える。