React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利
現在の React v18.2.0 では、まだ experimental な useFormStatus を利用すると次のような記述で、重複送信を防ぐボタンを簡単に実装できる。これの良い点は、フォームと実装を分離できている点。
jsx
"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 と同様の挙動をしているように思える。