fix: better opt out of loader revalidation on UI only changes

Author: jacob-ebey

.changeset/better-opt-out-of-revalidations.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+better opt out of loader revalidation on UI only changes

integration/hmr-log-test.ts

@@ -156,7 +156,7 @@ let fixture = (options: {
     "app/routes/_index.tsx": js`
       import { useLoaderData } from "@remix-run/react";
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         const t = useLoaderData();
@@ -286,7 +286,7 @@ test("HMR", async ({ page }) => {
       import { useLoaderData } from "@remix-run/react";
       import styles from "~/styles.module.css";
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         const t = useLoaderData();
@@ -329,7 +329,7 @@ test("HMR", async ({ page }) => {
       export let loader = () => json({ hello: "world" });
 
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         let { hello } = useLoaderData<typeof loader>();
@@ -358,7 +358,7 @@ test("HMR", async ({ page }) => {
       }
 
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         let { hello } = useLoaderData<typeof loader>();

integration/hmr-test.ts

@@ -156,7 +156,7 @@ let fixture = (options: {
     "app/routes/_index.tsx": js`
       import { useLoaderData } from "@remix-run/react";
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         const t = useLoaderData();
@@ -286,7 +286,7 @@ test("HMR", async ({ page }) => {
       import { useLoaderData } from "@remix-run/react";
       import styles from "~/styles.module.css";
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         const t = useLoaderData();
@@ -329,7 +329,7 @@ test("HMR", async ({ page }) => {
       export let loader = () => json({ hello: "world" });
 
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         let { hello } = useLoaderData<typeof loader>();
@@ -358,7 +358,7 @@ test("HMR", async ({ page }) => {
       }
 
       export function shouldRevalidate(args) {
-        return args.defaultShouldRevalidate;
+        return true;
       }
       export default function Index() {
         let { hello } = useLoaderData<typeof loader>();

packages/remix-react/routes.tsx

@@ -180,22 +180,18 @@ function createShouldRevalidate(
     let module = routeModules[route.id];
     invariant(module, `Expected route module to be loaded for ${route.id}`);
 
-    if (module.shouldRevalidate) {
-      if (typeof needsRevalidation === "boolean" && !handledRevalidation) {
-        handledRevalidation = true;
-        return module.shouldRevalidate({
-          ...arg,
-          defaultShouldRevalidate: needsRevalidation,
-        });
-      }
-      return module.shouldRevalidate(arg);
-    }
-
+    // When an HMR / HDR update happens we opt out of all user-defined
+    // revalidation logic and the do as the dev server tells us the first
+    // time router.revalidate() is called.
     if (typeof needsRevalidation === "boolean" && !handledRevalidation) {
       handledRevalidation = true;
       return needsRevalidation;
     }
 
+    if (module.shouldRevalidate) {
+      return module.shouldRevalidate(arg);
+    }
+
     return arg.defaultShouldRevalidate;
   };
 }