How do you prevent double clicks and repeated form submissions (Double Submissions)?

Short answer

Disable the submit button as soon as a request starts using isSubmitting, and cancel or ignore further requests while the first one is running.

Explanation

If a user clicks Save several times quickly, multiple server requests may repeat a charge or create duplicate records. Disable the button in the UI (disabled={isSubmitting}) and show a loading indicator, while using server-side Idempotency Keys as the primary defense.

Code example

function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
  return (
    <button type="submit" disabled={isSubmitting} className="btn-primary">
      {isSubmitting ? "Processing..." : "Confirm payment"}
    </button>
  );
}

Common mistakes

• Relying only on disabling the button in the browser without protecting the server with Idempotency Tokens.

Follow-up questions

• How do you automatically save form drafts (Auto-save) to prevent users from losing their input?

Sources

• React docs — useFormStatus