useFormStatus

useFormStatus can only be called in client components that are inside a form component. It shows the status information of the action which is called from that form.

import { submitForm } from "./actions.js";
 
function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

"use client"
import { useFormStatus } from "react-dom";
 
function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

References

• Data Fetching: Server Actions and Mutations | Next.js (nextjs.org)
• useFormStatus – React