Implement a submit handler that cannot send two requests from rapid clicks or Enter presses.

The save command may take several seconds. Prevent duplicate calls before React renders the disabled state, while allowing retry after failure.

Two rapid submit events produce one fetch call and one stable idempotency key.

• Guard synchronously.
• Disable the submit button.
• Reset the guard in finally.
• Use a server-supported idempotency key for consequential writes.

A ref closes the tiny gap before the pending render. State communicates progress; the ref enforces the invariant. The server key remains the final protection against retries outside this component.

const submittingRef = useRef(false);
const [pending, setPending] = useState(false);

async function submit(event: FormEvent) {
  event.preventDefault();
  if (submittingRef.current) return;
  submittingRef.current = true;
  setPending(true);
  const key = crypto.randomUUID();
  try {
    await api.createOrder(values, { idempotencyKey: key });
  } finally {
    submittingRef.current = false;
    setPending(false);
  }
}

return <button type="submit" disabled={pending} aria-busy={pending}>
  {pending ? "Creating order" : "Create order"}
</button>;

The client guard improves UX; database-backed idempotency provides correctness if the browser retries after an uncertain response.

• The request fails immediately.
• The component unmounts.
• A browser/network retry occurs.
• The user retries intentionally.

• Dispatch two submits in one act block.
• Verify retry after rejection.
• Assert one key per logical attempt.

• Relying only on disabled rendering.
• Never clearing pending after error.
• Generating a new key during transport retry.
• Claiming UI state guarantees server uniqueness.