useMatchRoute not updating when using React Compiler

[vixducis]

Which project does this relate to?

Router

Describe the bug

When using the function returned by useMatchRoute in combination with React Compiler, it looks the result is only evaluated on the initial render.

When using the repro stackblitz, you can remove the react compiler config, which will make the repro case act as I would expect it to.

Your Example Website or App

https://stackblitz.com/edit/github-jbydd83d?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

Using the reproduction scenario:

1. Click on the "To About"-link
2. The "Matched route name" doesn't change
3. Refresh
4. The "Matched route name" updates to the correct label

Expected behavior

The "Matched route name" label changes on each navigation change.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chromium
• Version: 137

Additional context

No response

[brenelz]

This only happens with the React Compiler enabled? Maybe this is a bug with that?

[vixducis]

Correct, only happens with React Compiler enabled. It's very much possible this is a bug in React Compiler. When this is the case, knowing the insides of the package might help clarify the issue to the react team, no? I'd be happy to report the issue to them, but I feel like a lack a bit of context.

[MYKEU]

Our current workaround consists of using useMatches or the use no memo directive

[ivan-dalmet]

Update: Issue is still here with the 1.0.0 of react compiler and 1.132.47 of tanstack router.

Workaround 'use no memo' at the top of the file is working

[telcy]

babel-plugin-react-compiler 1.0.0 @tanstack/react-router 1.139.14

I have experienced the same issue and have extracted the code into its own hook with "use no memo" to make it work.

function useIsSettings() {
  "use no memo";
  const matchRoute = useMatchRoute();
  const isSettings = !!matchRoute({
    to: "/w/$workspaceId/settings",
    fuzzy: true,
  });
  return isSettings;
}