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

1
"use client";
2

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

5
export default function SubmitButton({
6
  children,
7
  ...props
8
}: React.ComponentPropsWithoutRef"button") {
9
  const { pending } = useFormStatus();
10

11
  return (
12
    button {...props} type="submit" disabled={pending}
13
      {pending ? "Pending..." : children}
14
    /button
15
  );
16
}