Add callsite revalidation optout to navigations

Author: dadamssg

packages/react-router/__tests__/router/fetchers-test.ts

@@ -2415,7 +2415,7 @@ describe("fetchers", () => {
       });
     });
 
-    it("skips all revalidation when shouldRevalidate is false", async () => {
+    it("skips all revalidation when callsite defaultShouldRevalidate is false", async () => {
       let key = "key";
       let actionKey = "actionKey";
       let t = setup({

packages/react-router/lib/context.ts

@@ -154,6 +154,8 @@ export interface NavigateOptions {
   flushSync?: boolean;
   /** Enables a {@link https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API View Transition} for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the {@link https://api.reactrouter.com/v7/functions/react_router.useViewTransitionState.html useViewTransitionState()} hook.  */
   viewTransition?: boolean;
+  /** When false, suppresses loader revalidation triggered by this navigation **/
+  defaultShouldRevalidate?: boolean;
 }
 
 /**

packages/react-router/lib/dom/lib.tsx

@@ -1287,6 +1287,22 @@ export interface LinkProps
    * To apply specific styles for the transition, see {@link useViewTransitionState}
    */
   viewTransition?: boolean;
+
+  /**
+   * Controls whether loaders should revalidate when this link is clicked.
+   *
+   * ```tsx
+   * <Link to="/some/path" defaultShouldRevalidate={false} />
+   * ```
+   *
+   * When set to `false`, prevents the default revalidation behavior after navigation,
+   * keeping the current loader data without refetching. This can be useful when updating
+   * search params and you don't want to trigger a revalidation.
+   *
+   * By default (when not specified), loaders will revalidate according to the framework's
+   * standard revalidation behavior.
+   */
+  defaultShouldRevalidate?: boolean;
 }
 
 const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
@@ -1319,6 +1335,7 @@ const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
  * @param {LinkProps.state} props.state n/a
  * @param {LinkProps.to} props.to n/a
  * @param {LinkProps.viewTransition} props.viewTransition [modes: framework, data] n/a
+ * @param {LinkProps.defaultShouldRevalidate} props.defaultShouldRevalidate n/a
  */
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function LinkWithRef(
@@ -1334,6 +1351,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       to,
       preventScrollReset,
       viewTransition,
+      defaultShouldRevalidate,
       ...rest
     },
     forwardedRef,
@@ -1389,6 +1407,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       preventScrollReset,
       relative,
       viewTransition,
+      defaultShouldRevalidate,
     });
     function handleClick(
       event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -2183,6 +2202,7 @@ function useDataRouterState(hookName: DataRouterStateHook) {
  * @param options.viewTransition Enables a [View Transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
  * for this navigation. To apply specific styles during the transition, see
  * {@link useViewTransitionState}. Defaults to `false`.
+ * @param options.defaultShouldRevalidate Defaults to `true`
  * @returns A click handler function that can be used in a custom {@link Link} component.
  */
 export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
@@ -2194,13 +2214,15 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     preventScrollReset,
     relative,
     viewTransition,
+    defaultShouldRevalidate,
   }: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
     viewTransition?: boolean;
+    defaultShouldRevalidate?: boolean;
   } = {},
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
   let navigate = useNavigate();
@@ -2225,6 +2247,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
           preventScrollReset,
           relative,
           viewTransition,
+          defaultShouldRevalidate,
         });
       }
     },
@@ -2239,6 +2262,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
       preventScrollReset,
       relative,
       viewTransition,
+      defaultShouldRevalidate,
     ],
   );
 }
@@ -2549,8 +2573,6 @@ export function useSubmit(): SubmitFunction {
 
   return React.useCallback<SubmitFunction>(
     async (target, options = {}) => {
-      debugger;
-      console.log("useSubmit", target, options);
       let { action, method, encType, formData, body } = getFormSubmissionInfo(
         target,
         basename,

packages/react-router/lib/router/router.ts

@@ -1511,6 +1511,8 @@ export function createRouter(init: RouterInit): Router {
       // action/loader this will be ignored and the redirect will be a PUSH
       historyAction = NavigationType.Replace;
     }
+    let callSiteDefaultShouldRevalidate =
+      opts?.defaultShouldRevalidate !== false;
 
     let preventScrollReset =
       opts && "preventScrollReset" in opts
@@ -1549,14 +1551,6 @@ export function createRouter(init: RouterInit): Router {
       return;
     }
 
-    let shouldRevalidate =
-      opts && "shouldRevalidate" in opts
-        ? typeof opts.shouldRevalidate === "function"
-          ? opts.shouldRevalidate()
-          : // undefined should eval to true
-            opts.shouldRevalidate !== false
-        : true;
-
     await startNavigation(historyAction, nextLocation, {
       submission,
       // Send through the formData serialization error if we have one so we can
@@ -1565,8 +1559,8 @@ export function createRouter(init: RouterInit): Router {
       preventScrollReset,
       replace: opts && opts.replace,
       enableViewTransition: opts && opts.viewTransition,
-      shouldRevalidate,
       flushSync,
+      callSiteDefaultShouldRevalidate,
     });
   }
 
@@ -1642,7 +1636,7 @@ export function createRouter(init: RouterInit): Router {
       replace?: boolean;
       enableViewTransition?: boolean;
       flushSync?: boolean;
-      shouldRevalidate?: boolean;
+      callSiteDefaultShouldRevalidate?: boolean;
     },
   ): Promise<void> {
     // Abort any in-progress navigations and start a new one. Unset any ongoing
@@ -1782,15 +1776,6 @@ export function createRouter(init: RouterInit): Router {
 
       matches = actionResult.matches || matches;
       pendingActionResult = actionResult.pendingActionResult;
-
-      if (opts.shouldRevalidate === false) {
-        completeNavigation(location, {
-          matches,
-          ...getActionDataForCommit(pendingActionResult),
-        });
-        return;
-      }
-
       loadingNavigation = getLoadingNavigation(location, opts.submission);
       flushSync = false;
       // No need to do fog of war matching again on loader execution
@@ -1823,6 +1808,7 @@ export function createRouter(init: RouterInit): Router {
       opts && opts.initialHydration === true,
       flushSync,
       pendingActionResult,
+      opts && opts.callSiteDefaultShouldRevalidate !== false,
     );
 
     if (shortCircuited) {
@@ -2028,6 +2014,7 @@ export function createRouter(init: RouterInit): Router {
     initialHydration?: boolean,
     flushSync?: boolean,
     pendingActionResult?: PendingActionResult,
+    callSiteDefaultShouldRevalidate?: boolean,
   ): Promise<HandleLoadersResult> {
     // Figure out the right navigation we want to use for data loading
     let loadingNavigation =
@@ -2135,6 +2122,7 @@ export function createRouter(init: RouterInit): Router {
       basename,
       init.patchRoutesOnNavigation != null,
       pendingActionResult,
+      callSiteDefaultShouldRevalidate,
     );
 
     pendingNavigationLoadId = ++incrementingLoadId;
@@ -2396,7 +2384,6 @@ export function createRouter(init: RouterInit): Router {
       flushSync,
       preventScrollReset,
       submission,
-      // defaultShouldRevalidate, // todo
     );
   }
 
@@ -4937,6 +4924,7 @@ function getMatchesToLoad(
         forceShouldLoad,
       );
     }
+
     // This is the default implementation for when we revalidate.  If the route
     // provides it's own implementation, then we give them full control but
     // provide this value so they can leverage it if needed after they check