How to Use useSubmit Hook in Remix for Form Submission

In Remix, useSubmit is a hook that lets you programmatically submit forms without a page reload. You call useSubmit to get a submit function, then call that function with form data or an event to trigger the submission.

Syntax

The useSubmit hook returns a function that you can call to submit form data programmatically. You can pass it either a FormData object, an HTML form element, or a submit event.

Basic usage:

• const submit = useSubmit(); — gets the submit function.
• submit(formData, { method: 'post' }); — submits data with HTTP method.
• submit(formElement); — submits the form element from an event.

javascript

const submit = useSubmit();

// To submit form data programmatically
submit(formData, { method: 'post' });

// Or submit a form element directly
submit(formElement);

Example

This example shows a simple form with a button that triggers useSubmit to send the form data without a page reload. It demonstrates how to get the submit function and call it on button click.

jsx

import { useSubmit } from "@remix-run/react";

export default function NewsletterSignup() {
  const submit = useSubmit();

  function handleClick(event) {
    event.preventDefault();
    const form = event.currentTarget.form;
    submit(form, { method: "post" });
  }

  return (
    <form method="post">
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <button type="button" onClick={handleClick}>Subscribe</button>
    </form>
  );
}

Output

<form method="post">
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Subscribe</button>
</form>

Common Pitfalls

Common mistakes when using useSubmit include:

• Not preventing the default form submission event, causing a full page reload.
• Passing incorrect arguments to the submit function, like a plain object instead of FormData or a form element.
• Forgetting to specify the HTTP method in options, which defaults to GET and may not match your server action.

jsx

/* Wrong: causes full page reload because event default is not prevented */
function handleClick(event) {
  // event.preventDefault(); // missing
  const form = event.currentTarget.form;
  submit(form);
}

/* Right: prevent default and submit programmatically */
function handleClick(event) {
  event.preventDefault();
  const form = event.currentTarget.form;
  submit(form, { method: 'post' });
}

Quick Reference

useSubmit Cheat Sheet:

Usage	Description
const submit = useSubmit();	Get the submit function
submit(formElement);	Submit a form element
submit(formData, { method: 'post' });	Submit FormData with HTTP method
event.preventDefault()	Prevent default form submission

Usage	Description
const submit = useSubmit();	Get the submit function
submit(formElement);	Submit a form element
submit(formData, { method: 'post' });	Submit FormData with HTTP method
event.preventDefault()	Prevent default form submission

Key Takeaways

useSubmit returns a function to programmatically submit forms in Remix.

Always call event.preventDefault() to avoid full page reloads when submitting manually.

You can submit either a form element or FormData with an optional HTTP method.

useSubmit helps create smooth user experiences by avoiding full page refreshes.

Specify the HTTP method in submit options to match your server action.