fix(remix-react): avoid duplicate loader calls when using prefetch-intent

integration/prefetch-test.ts

@@ -52,7 +52,7 @@ function fixtureFactory(mode: RemixLinkProps["prefetch"]) {
 
       "app/routes/index.jsx": js`
         export default function() {
-          return <h2>Index</h2>;
+          return <h2 className="index">Index</h2>;
         }
       `,
 
@@ -61,13 +61,13 @@ function fixtureFactory(mode: RemixLinkProps["prefetch"]) {
           return { message: 'data from the loader' };
         }
         export default function() {
-          return <h2>With Loader</h2>;
+          return <h2 className="with-loader">With Loader</h2>;
         }
       `,
 
       "app/routes/without-loader.jsx": js`
         export default function() {
-          return <h2>Without Loader</h2>;
+          return <h2 className="without-loader">Without Loader</h2>;
         }
       `,
     },
@@ -187,6 +187,28 @@ test.describe("prefetch=intent (hover)", () => {
     );
     expect(await page.locator("#nav link").count()).toBe(3);
   });
+
+  test("removes prefetch tags after navigating to/from the page", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/");
+
+    // Links added on hover
+    await page.hover("a[href='/with-loader']");
+    await page.waitForSelector("#nav link", { state: "attached" });
+    expect(await page.locator("#nav link").count()).toBe(2);
+
+    // Links removed upon navigating to the page
+    await page.click("a[href='/with-loader']");
+    await page.waitForSelector("h2.with-loader", { state: "attached" });
+    expect(await page.locator("#nav link").count()).toBe(0);
+
+    // Links stay removed upon navigating away from the page
+    await page.click("a[href='/without-loader']");
+    await page.waitForSelector("h2.without-loader", { state: "attached" });
+    expect(await page.locator("#nav link").count()).toBe(0);
+  });
 });
 
 test.describe("prefetch=intent (focus)", () => {

packages/remix-react/components.tsx

@@ -398,12 +398,14 @@ interface PrefetchHandlers {
 
 function usePrefetchBehavior(
   prefetch: PrefetchBehavior,
-  theirElementProps: PrefetchHandlers
+  theirElementProps: PrefetchHandlers,
+  linkHref: string
 ) {
   let [maybePrefetch, setMaybePrefetch] = React.useState(false);
   let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
   let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } =
     theirElementProps;
+  let currentHref = useHref(useLocation());
 
   React.useEffect(() => {
     if (prefetch === "render") {
@@ -423,6 +425,17 @@ function usePrefetchBehavior(
     }
   };
 
+  React.useEffect(() => {
+    // If we navigate to a route that we potentially prefetched for, unset
+    // shouldPrefetch so that when we navigate away from this route the links
+    // don't get re-inserted and cause a dup call to the loader.  We should
+    // require another intent to re-insert
+    if (prefetch === "intent" && linkHref === currentHref) {
+      setMaybePrefetch(false);
+      setShouldPrefetch(false);
+    }
+  }, [prefetch, linkHref, currentHref]);
+
   React.useEffect(() => {
     if (maybePrefetch) {
       let id = setTimeout(() => {
@@ -456,7 +469,8 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
     let href = useHref(to);
     let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
       prefetch,
-      props
+      props,
+      href
     );
     return (
       <>
@@ -484,7 +498,8 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
     let href = useHref(to);
     let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
       prefetch,
-      props
+      props,
+      href
     );
     return (
       <>