diff --git a/packages/react-router/__tests__/useMatch-test.tsx b/packages/react-router/__tests__/useMatch-test.tsx index 11dff9730d..debf9004dd 100644 --- a/packages/react-router/__tests__/useMatch-test.tsx +++ b/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
{JSON.stringify(useMatch(pattern), null, 2)}
; @@ -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; + let firstMatch: PathMatch; + + function HomePage() { + match = useMatch(path); + + if (!firstMatch) { + firstMatch = match; + } + + return null; + } + + let renderer: TestRenderer.ReactTestRenderer; + TestRenderer.act(() => { + renderer = TestRenderer.create( + + + } /> + + + ); + }); + + TestRenderer.act(() => { + renderer.update( + + + } /> + + + ); + }); + + expect(match).toBe(firstMatch); + }); + }); }); diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx index c12b300d07..09ef0f584e 100644 --- a/packages/react-router/index.tsx +++ b/packages/react-router/index.tsx @@ -431,7 +431,8 @@ export function useMatch( `useMatch() may be used only in the context of a component.` ); - return matchPath(pattern, useLocation().pathname); + let { pathname } = useLocation(); + return React.useMemo(() => matchPath(pattern, pathname), [pathname, pattern]); } /**