feat(remix-react): add submitOptions argument for useSubmit and useFetcher

.changeset/metal-bikes-notice.md

@@ -0,0 +1,6 @@
+---
+"remix": minor
+"@remix-run/react": minor
+---
+
+feat(remix-react): add `submitOptions` argument for `useSubmit` and `useFetcher`

docs/hooks/use-fetcher.md

@@ -60,6 +60,24 @@ Notes about how it works:
 - Handles uncaught errors by rendering the nearest `ErrorBoundary` (just like a normal navigation from `<Link>` or `<Form>`)
 - Will redirect the app if your action/loader being called returns a redirect (just like a normal navigation from `<Link>` or `<Form>`)
 
+### Arguments
+
+`useFetcher` takes one optional argument which is the `submitOptions` that will be used as a default for calls to `fetcher.submit`. This is useful to avoid repetition and to ensure the reference to `fetcher` remains stable if you need to include it in a dependency array.
+
+#### `submitOptions.method`
+
+The URL method to use when submitting. Defaults to `"get"` (options are `"get"`, `"post"`, `"put"`, `"patch"`, `"delete"`).
+
+#### `submitOptions.action`
+
+The URL to submit to. Defaults to the current URL.
+
+#### `submitOptions.encType`
+
+The `enctype` to use when submitting. Defaults to `"application/x-www-form-urlencoded"`.
+
+### Properties
+
 #### `fetcher.state`
 
 You can know the state of the fetcher with `fetcher.state`. It will be one of:

docs/hooks/use-submit.md

@@ -67,3 +67,23 @@ function useSessionTimeout() {
   }, [submit, transition]);
 }
 ```
+
+### Arguments
+
+`useSubmit` takes one optional argument which is the `submitOptions` that will be used as a default for calls to `submit`. This is useful to avoid repetition and to ensure the reference to `submit` remains stable if you need to include it in a dependency array.
+
+#### `submitOptions.method`
+
+The URL method to use when submitting. Defaults to `"get"` (options are `"get"`, `"post"`, `"put"`, `"patch"`, `"delete"`).
+
+#### `submitOptions.action`
+
+The URL to submit to. Defaults to the current URL.
+
+#### `submitOptions.encType`
+
+The `enctype` to use when submitting. Defaults to `"application/x-www-form-urlencoded"`.
+
+#### `submitOptions.replace`
+
+Whether to replace the current history entry or push a new one. Defaults to `false`.

integration/fetcher-test.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { test, expect } from "@playwright/test";
 
 import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
 import type { Fixture, AppFixture } from "./helpers/create-fixture";
@@ -143,6 +143,34 @@ test.describe("useFetcher", () => {
             );
           }
         `,
+
+        "app/routes/stable-fetcher.jsx": js`
+          import { useFetcher, useSearchParams } from "@remix-run/react";
+          import { useEffect, useRef } from "react";
+
+          export default function Fetcher() {
+            const [, setSearchParams] = useSearchParams();
+            const clickedRef = useRef(false);
+            const fetcher = useFetcher({ action: "/whatever" });
+
+            useEffect(() => {
+              if (clickedRef.current) {
+                throw new Error("fetcher changed!");
+              }
+            }, [fetcher]);
+
+            return (
+              <button
+                onClick={() => {
+                  clickedRef.current = true;
+                  setSearchParams({ random: Math.random().toString() });
+                }}
+              >
+                Set searchParams
+              </button>
+            );
+          }
+        `,
       },
     });
 
@@ -232,4 +260,13 @@ test.describe("useFetcher", () => {
     await app.clickElement("#submit-index-post");
     await page.waitForSelector(`pre:has-text("${PARENT_INDEX_ACTION}")`);
   });
+
+  test("fetchers should be stable when providing submit options", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/stable-fetcher");
+    await app.clickElement("button");
+    expect(await app.getHtml()).not.toContain("fetcher changed!");
+  });
 });

packages/remix-react/components.tsx

@@ -1256,16 +1256,29 @@ export interface SubmitFunction {
  *
  * @see https://remix.run/api/remix#usesubmit
  */
-export function useSubmit(): SubmitFunction {
-  return useSubmitImpl();
+export function useSubmit(options?: SubmitOptions): SubmitFunction {
+  let key = undefined; // no key for global submit
+  return useSubmitImpl(key, options);
 }
 
-let defaultMethod = "get";
-let defaultEncType = "application/x-www-form-urlencoded";
-
-export function useSubmitImpl(key?: string): SubmitFunction {
+const DEFAULT_METHOD = "get";
+const DEFAULT_ENC_TYPE = "application/x-www-form-urlencoded";
+
+// TODO: remove the export here?
+export function useSubmitImpl(
+  key?: string,
+  {
+    method: submitMethod = DEFAULT_METHOD,
+    action: submitAction,
+    encType: submitEncType = DEFAULT_ENC_TYPE,
+    replace,
+  }: SubmitOptions = {}
+): SubmitFunction {
   let navigate = useNavigate();
-  let defaultAction = useFormAction();
+  let defaultFormAction = useFormAction();
+  let defaultAction = submitAction || defaultFormAction;
+  let defaultMethod = submitMethod || DEFAULT_METHOD;
+  let defaultEncType = submitEncType || DEFAULT_ENC_TYPE;
   let { transitionManager } = useRemixEntryContext();
 
   return React.useCallback(
@@ -1334,9 +1347,9 @@ export function useSubmitImpl(key?: string): SubmitFunction {
           );
         }
 
-        method = options.method || "get";
+        method = options.method || defaultMethod;
         action = options.action || defaultAction;
-        encType = options.encType || "application/x-www-form-urlencoded";
+        encType = options.encType || defaultEncType;
 
         if (target instanceof FormData) {
           formData = target;
@@ -1408,10 +1421,21 @@ export function useSubmitImpl(key?: string): SubmitFunction {
         });
       } else {
         setNextNavigationSubmission(submission);
-        navigate(url.pathname + url.search, { replace: options.replace });
+        navigate(url.pathname + url.search, {
+          replace:
+            typeof options.replace === "undefined" ? replace : options.replace,
+        });
       }
     },
-    [defaultAction, key, navigate, transitionManager]
+    [
+      defaultAction,
+      defaultEncType,
+      defaultMethod,
+      key,
+      navigate,
+      replace,
+      transitionManager,
+    ]
   );
 }
 
@@ -1578,17 +1602,18 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
  *
  * @see https://remix.run/api/remix#usefetcher
  */
-export function useFetcher<TData = any>(): FetcherWithComponents<
-  SerializeFrom<TData>
-> {
+export function useFetcher<TData = any>(
+  // replace doesn't make sense for fetchers
+  submitOptions?: Omit<SubmitOptions, "replace">
+): FetcherWithComponents<SerializeFrom<TData>> {
   let { transitionManager } = useRemixEntryContext();
 
   let [key] = React.useState(() => String(++fetcherId));
   let [Form] = React.useState(() => createFetcherForm(key));
   let [load] = React.useState(() => (href: string) => {
     transitionManager.send({ type: "fetcher", href, key });
   });
-  let submit = useSubmitImpl(key);
+  let submit = useSubmitImpl(key, submitOptions);
 
   let fetcher = transitionManager.getFetcher<SerializeFrom<TData>>(key);