Do not revalidate unmounted fetchers when v7_persistFetcher is enabled (#11044)

Author: brophdawg11

.changeset/unmounted-fetcher-revalidate.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Do not revalidate unmounted fetchers when `v7_fetcherPersist` is enabled

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -6288,6 +6288,107 @@ function testDomRouter(
             await waitFor(() => screen.getByText("FETCH ERROR"));
             expect(getHtml(container)).toMatch("Unexpected Application Error!");
           });
+
+          it("unmounted fetchers should not revalidate", async () => {
+            let count = 0;
+            let loaderDfd = createDeferred();
+            let actionDfd = createDeferred();
+            let router = createTestRouter(
+              [
+                {
+                  path: "/",
+                  action: () => actionDfd.promise,
+                  Component() {
+                    let [showFetcher, setShowFetcher] = React.useState(true);
+                    let [fetcherData, setFetcherData] = React.useState(null);
+                    let fetchers = useFetchers();
+                    let actionData = useActionData();
+                    let navigation = useNavigation();
+
+                    return (
+                      <>
+                        <Form method="post">
+                          <button type="submit">Submit Form</button>
+                          <p>{`Navigation State: ${navigation.state}`}</p>
+                          <p>{`Action Data: ${actionData}`}</p>
+                          <p>{`Active Fetchers: ${fetchers.length}`}</p>
+                        </Form>
+                        {showFetcher ? (
+                          <FetcherComponent
+                            onClose={(data) => {
+                              setFetcherData(data);
+                              setShowFetcher(false);
+                            }}
+                          />
+                        ) : (
+                          <p>{fetcherData}</p>
+                        )}
+                      </>
+                    );
+                  },
+                },
+                {
+                  path: "/fetch",
+                  async loader() {
+                    count++;
+                    if (count === 1) return await loaderDfd.promise;
+                    throw new Error("Fetcher load called too many times");
+                  },
+                },
+              ],
+              { window: getWindow("/"), future: { v7_fetcherPersist: true } }
+            );
+
+            function FetcherComponent({ onClose }) {
+              let fetcher = useFetcher();
+
+              React.useEffect(() => {
+                if (fetcher.state === "idle" && fetcher.data) {
+                  onClose(fetcher.data);
+                }
+              }, [fetcher, onClose]);
+
+              return (
+                <>
+                  <button onClick={() => fetcher.load("/fetch")}>
+                    Load Fetcher
+                  </button>
+                  <pre>{`Fetcher State: ${fetcher.state}`}</pre>
+                </>
+              );
+            }
+
+            render(<RouterProvider router={router} />);
+
+            fireEvent.click(screen.getByText("Load Fetcher"));
+            await waitFor(
+              () =>
+                screen.getByText("Active Fetchers: 1") &&
+                screen.getByText("Fetcher State: loading")
+            );
+
+            loaderDfd.resolve("FETCHER DATA");
+            await waitFor(
+              () =>
+                screen.getByText("FETCHER DATA") &&
+                screen.getByText("Active Fetchers: 0")
+            );
+
+            fireEvent.click(screen.getByText("Submit Form"));
+            await waitFor(() =>
+              screen.getByText("Navigation State: submitting")
+            );
+
+            actionDfd.resolve("ACTION");
+            await waitFor(
+              () =>
+                screen.getByText("Navigation State: idle") &&
+                screen.getByText("Active Fetchers: 0") &&
+                screen.getByText("Action Data: ACTION")
+            );
+
+            expect(count).toBe(1);
+          });
         });
       });
 

packages/router/router.ts

@@ -1632,6 +1632,7 @@ export function createRouter(init: RouterInit): Router {
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
+      deletedFetchers,
       fetchLoadMatches,
       fetchRedirectIds,
       routesToUse,
@@ -2005,6 +2006,7 @@ export function createRouter(init: RouterInit): Router {
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
+      deletedFetchers,
       fetchLoadMatches,
       fetchRedirectIds,
       routesToUse,
@@ -3549,6 +3551,7 @@ function getMatchesToLoad(
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
   cancelledFetcherLoads: string[],
+  deletedFetchers: Set<string>,
   fetchLoadMatches: Map<string, FetchLoadMatch>,
   fetchRedirectIds: Set<string>,
   routesToUse: AgnosticDataRouteObject[],
@@ -3616,7 +3619,10 @@ function getMatchesToLoad(
   let revalidatingFetchers: RevalidatingFetcher[] = [];
   fetchLoadMatches.forEach((f, key) => {
     // Don't revalidate if fetcher won't be present in the subsequent render
-    if (!matches.some((m) => m.route.id === f.routeId)) {
+    if (
+      !matches.some((m) => m.route.id === f.routeId) ||
+      deletedFetchers.has(key)
+    ) {
       return;
     }