Ensure useFetcher is stable across re-renders in back-compat layer (#…

…5118)

* Ensure useFetcher is stable across re-renders in back-compat layer

* Fix linting issues

.changeset/lovely-seals-sin.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Ensure useFetcher is stable across re-renders in backwards-compatibility layer

packages/remix-react/CHANGELOG.md

@@ -14,6 +14,7 @@
 - Add `future.v2_errorBoundary` flag to opt-into v2 `ErrorBoundary` behavior. This removes the separate `CatchBoundary` and `ErrorBoundary` and consolidates them into a single `ErrorBoundary` following the logic used by `errorElement` in React Router. You can then use `isRouteErrorResponse` to differentiate between thrown `Response`/`Error` instances. ([#4918](https://github.com/remix-run/remix/pull/4918))
 
   ```jsx
+  /* eslint-disable import/no-extraneous-dependencies */
   // Current (Remix v1 default)
   import { useCatch } from "@remix-run/react";
 
@@ -29,7 +30,10 @@
   export function ErrorBoundary({ error }) {
     return <p>{error.message}</p>;
   }
+  ```
 
+  ```jsx
+  /* eslint-disable import/no-extraneous-dependencies */
   // Using future.v2_errorBoundary
   import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 

packages/remix-react/components.tsx

@@ -1359,21 +1359,24 @@ export function useFetcher<TData = any>(): FetcherWithComponents<
   SerializeFrom<TData>
 > {
   let fetcherRR = useFetcherRR();
-  let remixFetcher = convertRouterFetcherToRemixFetcher({
-    state: fetcherRR.state,
-    data: fetcherRR.data,
-    formMethod: fetcherRR.formMethod,
-    formAction: fetcherRR.formAction,
-    formData: fetcherRR.formData,
-    formEncType: fetcherRR.formEncType,
-    " _hasFetcherDoneAnything ": fetcherRR[" _hasFetcherDoneAnything "],
-  });
-  return {
-    ...remixFetcher,
-    load: fetcherRR.load,
-    submit: fetcherRR.submit,
-    Form: fetcherRR.Form,
-  };
+
+  return React.useMemo(() => {
+    let remixFetcher = convertRouterFetcherToRemixFetcher({
+      state: fetcherRR.state,
+      data: fetcherRR.data,
+      formMethod: fetcherRR.formMethod,
+      formAction: fetcherRR.formAction,
+      formData: fetcherRR.formData,
+      formEncType: fetcherRR.formEncType,
+      " _hasFetcherDoneAnything ": fetcherRR[" _hasFetcherDoneAnything "],
+    });
+    return {
+      ...remixFetcher,
+      load: fetcherRR.load,
+      submit: fetcherRR.submit,
+      Form: fetcherRR.Form,
+    };
+  }, [fetcherRR]);
 }
 
 function convertRouterFetcherToRemixFetcher(

packages/remix-server-runtime/CHANGELOG.md

@@ -13,6 +13,7 @@
 - Add `future.v2_errorBoundary` flag to opt-into v2 `ErrorBoundary` behavior. This removes the separate `CatchBoundary` and `ErrorBoundary` and consolidates them into a single `ErrorBoundary` following the logic used by `errorElement` in React Router. You can then use `isRouteErrorResponse` to differentiate between thrown `Response`/`Error` instances. ([#4918](https://github.com/remix-run/remix/pull/4918))
 
   ```jsx
+  /* eslint-disable import/no-extraneous-dependencies */
   // Current (Remix v1 default)
   import { useCatch } from "@remix-run/react";
 
@@ -28,7 +29,10 @@
   export function ErrorBoundary({ error }) {
     return <p>{error.message}</p>;
   }
+  ```
 
+  ```jsx
+  /* eslint-disable import/no-extraneous-dependencies */
   // Using future.v2_errorBoundary
   import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 

yarn.lock

@@ -2248,72 +2248,11 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/dev@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/@remix-run/dev/-/dev-1.10.0.tgz#3a5b2cb52eee6da1d993538a44a307375bf694df"
-  integrity sha512-WBbxkPSkN1LQx0gdzGT+VBSbQLGiFW/Q7HaAYBxV7Wd7DdByk61GPz9CRb1K9a7eWGJ+FzZeYvRwqYkz7moRgA==
-  dependencies:
-    "@babel/core" "^7.18.6"
-    "@babel/plugin-syntax-jsx" "^7.18.6"
-    "@babel/plugin-syntax-typescript" "^7.20.0"
-    "@babel/preset-env" "^7.18.6"
-    "@babel/preset-typescript" "^7.18.6"
-    "@babel/types" "^7.20.2"
-    "@esbuild-plugins/node-modules-polyfill" "^0.1.4"
-    "@npmcli/package-json" "^2.0.0"
-    "@remix-run/server-runtime" "1.10.0"
-    arg "^5.0.1"
-    cacache "^15.0.5"
-    chalk "^4.1.2"
-    chokidar "^3.5.1"
-    dotenv "^16.0.0"
-    esbuild "0.16.3"
-    execa "5.1.1"
-    exit-hook "2.2.1"
-    express "^4.17.1"
-    fast-glob "3.2.11"
-    fs-extra "^10.0.0"
-    get-port "^5.1.1"
-    gunzip-maybe "^1.4.2"
-    inquirer "^8.2.1"
-    jscodeshift "^0.13.1"
-    jsesc "3.0.2"
-    json5 "^2.2.1"
-    lodash "^4.17.21"
-    lodash.debounce "^4.0.8"
-    minimatch "^3.0.4"
-    node-fetch "^2.6.7"
-    ora "^5.4.1"
-    prettier "2.7.1"
-    pretty-ms "^7.0.1"
-    proxy-agent "^5.0.0"
-    recast "^0.21.5"
-    remark-frontmatter "4.0.1"
-    remark-mdx-frontmatter "^1.0.1"
-    semver "^7.3.7"
-    sort-package-json "^1.55.0"
-    tar-fs "^2.1.1"
-    tsconfig-paths "^4.0.0"
-    ws "^7.4.5"
-    xdm "^2.0.0"
-
 "@remix-run/router@1.3.0-pre.2":
   version "1.3.0-pre.2"
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0-pre.2.tgz#13f8ac419d272558a9d48f6efe40a8909f6ff212"
   integrity sha512-XWpQkUMfuJy5BPA+fivgJtKPiRu1VC5M3LdrUw6Wb310liR3LUIUmY2b5xP6kpcbpIQOTMgF4NVrdwZ4NRG0lA==
 
-"@remix-run/server-runtime@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-1.10.0.tgz#d498332a8b6f7ee9a2dca5ac987619a1bce8f9e1"
-  integrity sha512-2Hlyv96JI4R3ygsF+zgC7NxfeRO1lqNxH/0GpPniyZIfq3JT4+PmTOgbx7HSsj/jgJzDfCyhwjymGYK84mBMKg==
-  dependencies:
-    "@remix-run/router" "1.3.0-pre.2"
-    "@types/cookie" "^0.4.0"
-    "@web3-storage/multipart-parser" "^1.0.0"
-    cookie "^0.4.1"
-    set-cookie-parser "^2.4.8"
-    source-map "^0.7.3"
-
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
   resolved "https://registry.npmjs.org/@remix-run/web-blob/-/web-blob-3.0.4.tgz"