useSubmit

This hook is simply a re-export of React Router’s useSubmit.

Returns the function that may be used to submit a <form> (or some raw FormData) to the server using the same process that <Form> uses internally onSubmit. If you’re familiar with React Router’s useNavigate, you can think about this as the same thing but for <Form> instead of <Link>.

This is useful whenever you need to programmatically submit a form. For example, you may wish to save a user preferences form whenever any field changes.

  1. import type { ActionArgs } from "@remix-run/node"; // or cloudflare/deno
  2. import { json } from "@remix-run/node"; // or cloudflare/deno
  3. import { useSubmit, useNavigation } from "@remix-run/react";
  5. export async function loader() {
  6.   return json(await getUserPreferences());
  7. }
  9. export async function action({ request }: ActionArgs) {
  10.   await updatePreferences(await request.formData());
  11.   return redirect("/prefs");
  12. }
  14. function UserPreferences() {
  15.   const submit = useSubmit();
  16.   const navigation = useNavigation();
  18.   function handleChange(event) {
  19.     submit(event.currentTarget, { replace: true });
  20.   }
  22.   return (
  23.     <Form method="post" onChange={handleChange}>
  24.       <label>
  25.         <input type="checkbox" name="darkMode" value="on" />{" "}
  26.         Dark Mode
  27.       </label>
  28.       {navigation.state === "submitting" ? (
  29.         <p>Saving...</p>
  30.       ) : null}
  31.     </Form>
  32.   );
  33. }

This can also be useful if you’d like to automatically sign someone out of your website after a period of inactivity. In this case, we’ve defined inactivity as the user hasn’t navigated to any other pages after 5 minutes.

  1. import { useSubmit, useNavigation } from "@remix-run/react";
  2. import { useEffect } from "react";
  4. function AdminPage() {
  5.   useSessionTimeout();
  6.   return <div>{/* ... */}</div>;
  7. }
  9. function useSessionTimeout() {
  10.   const submit = useSubmit();
  11.   const navigation = useNavigation();
  13.   useEffect(() => {
  14.     const timer = setTimeout(() => {
  15.       submit(null, { method: "post", action: "/logout" });
  16.     }, 5 * 60_000);
  18.     return () => clearTimeout(timer);
  19.   }, [submit, navigation]);
  20. }

For more information and usage, please refer to the React Router useSubmit docs.