Optimization to avoid redundant calls to matchRoutes (#12800)

remix-run · Jan 23, 2025 · e23d6cb · e23d6cb
1 parent 8f42290
commit e23d6cb
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/.changeset/smooth-mangos-act.md b/.changeset/smooth-mangos-act.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Optimize route matching by skipping redundant `matchRoutes` calls when possible
diff --git a/packages/react-router/__tests__/dom/ssr/components-test.tsx b/packages/react-router/__tests__/dom/ssr/components-test.tsx
@@ -150,9 +150,10 @@ describe("<NavLink />", () => {
 
 describe("<ServerRouter>", () => {
   it("handles empty default export objects from the compiler", async () => {
-    let staticHandlerContext = await createStaticHandler([{ path: "/" }]).query(
-      new Request("http://localhost/")
-    );
+    let staticHandlerContext = await createStaticHandler([
+      { id: "root", path: "/", children: [{ id: "empty", index: true }] },
+    ]).query(new Request("http://localhost/"));
+
     invariant(
       !(staticHandlerContext instanceof Response),
       "Expected a context"

diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
@@ -31,6 +31,7 @@ import type {
 } from "./router/router";
 import { IDLE_BLOCKER } from "./router/router";
 import type {
+  AgnosticRouteMatch,
   ParamParseKey,
   Params,
   PathMatch,
@@ -534,7 +535,12 @@ export function useRoutesImpl(
     remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
   }
 
-  let matches = matchRoutes(routes, { pathname: remainingPathname });
+  let matches =
+    dataRouterState &&
+    dataRouterState.matches &&
+    dataRouterState.matches.length > 0
+      ? (dataRouterState.matches as AgnosticRouteMatch<string, RouteObject>[])
+      : matchRoutes(routes, { pathname: remainingPathname });
 
   if (ENABLE_DEV_WARNINGS) {
     warning(

diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts
@@ -838,6 +838,7 @@ export function createRouter(init: RouterInit): Router {
   let initialScrollRestored = init.hydrationData != null;
 
   let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
+  let initialMatchesIsFOW = false;
   let initialErrors: RouteData | null = null;
 
   if (initialMatches == null && !patchRoutesOnNavigationImpl) {
@@ -882,6 +883,7 @@ export function createRouter(init: RouterInit): Router {
       init.history.location.pathname
     );
     if (fogOfWar.active && fogOfWar.matches) {
+      initialMatchesIsFOW = true;
       initialMatches = fogOfWar.matches;
     }
   } else if (initialMatches.some((m) => m.route.lazy)) {
@@ -1521,7 +1523,14 @@ export function createRouter(init: RouterInit): Router {
 
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let loadingNavigation = opts && opts.overrideNavigation;
-    let matches = matchRoutes(routesToUse, location, basename);
+    let matches =
+      opts?.initialHydration &&
+      state.matches &&
+      state.matches.length > 0 &&
+      !initialMatchesIsFOW
+        ? // `matchRoutes()` has already been called if we're in here via `router.initialize()`
+          state.matches
+        : matchRoutes(routesToUse, location, basename);
     let flushSync = (opts && opts.flushSync) === true;
 
     let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);