useMatch's memo is easy to break by accident using a PathPattern

[epmatsw]

I'm using React Router as a...

library

Reproduction

I promise I tried to make a StackBlitz for this, but it really doesn't like demos that trigger infinite loops 😂

This is kind of a toy example, but if you pass a PathPattern object to useMatch, its memoization starts to fail. That's sneaky, because going from (working) code like this:

  const [count, setCount] = useState(0);
  const match = useMatch('test');
  useEffect(() => setCount((c) => c + 1), [match]);

to this:

  const [count, setCount] = useState(0);
  const match = useMatch({
    path: 'test',
    caseSensitive: true,
  });
  useEffect(() => setCount((c) => c + 1), [match]);

introduces an infinite loop.

I think that the memo here:

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

Lines 173 to 175 in 5a1ca08

	return React.useMemo(
	() => matchPath<ParamKey, Path>(pattern, decodePath(pathname)),
	[pathname, pattern]

could be tweaked a bit to pull the values off of the passed in object (if it's an object) instead of forcing each caller to add an additional useMemo to get memoization to work.

System Info

Binaries:
    Node: 23.7.0 - ~/.nvm/versions/node/v23.7.0/bin/node
    Yarn: 4.6.0 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v23.7.0/bin/npm
    bun: 1.2.1 - ~/.bun/bin/bun
    Watchman: 2024.11.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome Canary: 135.0.7003.0
    Safari Technology Preview: 18.0

Used Package Manager

npm

Expected Behavior

useMatch returns a memoized object when feasible.

Actual Behavior

When you pass in a PathPattern, useMatch's result is no longer memoized.

[epmatsw]

Memoization was added to this hook in #7059 and #8431

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a GitHub actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or GitHub link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here, and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support, it can be considered for implementation.

If you have any questions, you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!

[epmatsw]

@brophdawg11 @brookslybrand this one is hard to do a stack blitz for since it introduces an infinite loop, but the repro code here is pretty straightforward I think. Worth reopening?

[brophdawg11]

Ahh - yeah that's tricky. Would you be able to create a small github repo we could clone and run locally?