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

* fix: avoid duplicate loader call on prefetch intent

* chore: fix typo in comment

* fix: remove prefetch intent on mouse leave

* docs: update docs on prefetch caching

Author: brophdawg11

docs/api/remix.md

@@ -125,7 +125,7 @@ In our effort to remove all loading states from your UI, `Link` can automaticall
 ```
 
 - **"none"** - Default behavior. This will prevent any prefetching from happening. This is recommended when linking to pages that require a user session that the browser won't be able to prefetch anyway.
-- **"intent"** - Recommended if you want to prefetch. Fetches when Remix thinks the user intends to visit the link. Right now the behavior is simple: if they hover or focus the link it will prefetch the resources. In the future we hope to make this even smarter. Links with large click areas/padding get a bit of a head start.
+- **"intent"** - Recommended if you want to prefetch. Fetches when Remix thinks the user intends to visit the link. Right now the behavior is simple: if they hover or focus the link it will prefetch the resources. In the future we hope to make this even smarter. Links with large click areas/padding get a bit of a head start. It is worth noting that when using `prefetch="intent"`, `<link rel="prefetch">` elements will be inserted on hover/focus and removed if the `<Link>` loses hover/focus. Without proper `cache-control` headers on your loaders this could result in repeated prefetch loads if a user continually hovers on and off a link.
 - **"render"** - Fetches when the link is rendered.
 
 <docs-error>You may need to use the <code>:last-of-type</code> selector instead of <code>:last-child</code> when styling child elements inside of your links</docs-error>

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>;
         }
       `,
     },
@@ -185,7 +185,29 @@ test.describe("prefetch=intent (hover)", () => {
       "#nav link[rel='modulepreload'][href^='/build/routes/without-loader-']",
       { state: "attached" }
     );
-    expect(await page.locator("#nav link").count()).toBe(3);
+    expect(await page.locator("#nav link").count()).toBe(1);
+  });
+
+  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);
   });
 });
 
@@ -237,6 +259,6 @@ test.describe("prefetch=intent (focus)", () => {
       "#nav link[rel='modulepreload'][href^='/build/routes/without-loader-']",
       { state: "attached" }
     );
-    expect(await page.locator("#nav link").count()).toBe(3);
+    expect(await page.locator("#nav link").count()).toBe(1);
   });
 });

packages/remix-react/components.tsx

@@ -420,6 +420,7 @@ function usePrefetchBehavior(
   let cancelIntent = () => {
     if (prefetch === "intent") {
       setMaybePrefetch(false);
+      setShouldPrefetch(false);
     }
   };