POC optimization for matchRoutes (#12169)

Author: brophdawg11

.changeset/short-pugs-double.md

@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"@remix-run/router": patch
+---
+
+Optimize route matching by skipping redundant `matchRoutes` calls when possible

package.json

@@ -108,10 +108,10 @@
       "none": "58.1 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "16.5 kB"
+      "none": "16.52 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
-      "none": "19.0 kB"
+      "none": "19.1 kB"
     },
     "packages/react-router-dom/dist/react-router-dom.production.min.js": {
       "none": "17.5 kB"

packages/react-router/lib/hooks.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type {
+  AgnosticRouteMatch,
   Blocker,
   BlockerFunction,
   Location,
@@ -445,7 +446,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 (__DEV__) {
     warning(

packages/router/router.ts

@@ -829,6 +829,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) {
@@ -874,6 +875,7 @@ export function createRouter(init: RouterInit): Router {
         init.history.location.pathname
       );
       if (fogOfWar.active && fogOfWar.matches) {
+        initialMatchesIsFOW = true;
         initialMatches = fogOfWar.matches;
       }
     }
@@ -1522,7 +1524,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);