Memoize result from useMatch() between renders (#8431)

Co-authored-by: Tim Dorr <[email protected]>

Author: jonkoops

packages/react-router/__tests__/useMatch-test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, useMatch } from "react-router";
+import { MemoryRouter, PathMatch, Routes, Route, useMatch } from "react-router";
 
 function ShowMatch({ pattern }: { pattern: string }) {
   return <pre>{JSON.stringify(useMatch(pattern), null, 2)}</pre>;
@@ -93,4 +93,45 @@ describe("useMatch", () => {
       `);
     });
   });
+
+  describe("when re-rendered with the same URL", () => {
+    it("returns the memoized match", () => {
+      let path = "/home";
+      let match: PathMatch<string>;
+      let firstMatch: PathMatch<string>;
+
+      function HomePage() {
+        match = useMatch(path);
+
+        if (!firstMatch) {
+          firstMatch = match;
+        }
+
+        return null;
+      }
+
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={[path]}>
+            <Routes>
+              <Route path={path} element={<HomePage />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      TestRenderer.act(() => {
+        renderer.update(
+          <MemoryRouter initialEntries={[path]}>
+            <Routes>
+              <Route path={path} element={<HomePage />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(match).toBe(firstMatch);
+    });
+  });
 });

packages/react-router/index.tsx

@@ -431,7 +431,8 @@ export function useMatch<ParamKey extends string = string>(
     `useMatch() may be used only in the context of a <Router> component.`
   );
 
-  return matchPath(pattern, useLocation().pathname);
+  let { pathname } = useLocation();
+  return React.useMemo(() => matchPath(pattern, pathname), [pathname, pattern]);
 }
 
 /**