fix(react-router): useMatchRoute w/ React Compiler - #8015

Merged
Sheraff merged 8 commits into
mainfrom
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged

fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom
fix-react-router-use-match-route-react-compiler

Conversation

@Sheraff

@SheraffSheraff commented Aug 8, 2026•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Collaborator

fixes#4499

Summary by CodeRabbit

Bug Fixes

  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.

Tests

  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.

@nx-cloud

nx-cloudBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

View your CI Pipeline Execution ↗ for commit 3abdab7

CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗

☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC

@github-actions

github-actionsBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

@coderabbitai

coderabbitaiBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.

Changes

React Compiler match route updates

Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-react-router-use-match-route-react-compiler

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actionsBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Bundle Size Benchmarks

  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history

The following scenarios have bundle-size changes compared with the baseline:

ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁

Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.

@pkg-pr-new

pkg-pr-newBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown
More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7

@codspeed-hq

codspeed-hqBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown

Merging this PR will regress 0 benchmarks

⚠️Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks

Performance Changes

ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.

Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)

Open in CodSpeed

nx-cloud[bot]
nx-cloudBot reviewed Aug 8, 2026
View reviewed changes

@nx-cloudnx-cloudBot left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important

At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.

Nx Cloud is proposing a fix for your failed CI:

We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.

Warning

❌ We could not verify this fix.

Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud


Or Apply changes locally with:

npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗



🎓 Learn more about Self-Healing CI on nx.dev

Sheraffand others added 3 commits August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security

socket-securityBot commented Aug 8, 2026•
edited
Loading

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100

View full report

coderabbitai[bot]
coderabbitaiBot reviewed Aug 8, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766

📥 Commits

Reviewing files that changed from the base of the PR and between 6924573 and 67802df.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx

Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx Outdated
@github-actionsgithub-actionsBot added the documentation Everything documentation related label Aug 10, 2026
@Sheraff
Sheraff merged commit 31355ae into mainAug 12, 2026
26 checks passed
@Sheraff
Sheraff deleted the fix-react-router-use-match-route-react-compiler branch August 12, 2026 08:35
@SheraffSheraff mentioned this pull request Aug 12, 2026
Merged
@kamalbennani

kamalbennani commented Aug 13, 2026

Copy link
Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it

@Sheraff

Sheraff commented Aug 13, 2026

Copy link
Copy Markdown
CollaboratorAuthor

Thank you @Sheraff for taking over my PR 🙇 appreciate it

I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry

@kamalbennani

kamalbennani commented Aug 13, 2026

Copy link
Copy Markdown

That's fine; what matters is that the fix has landed!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees

No one assigned

Labels

documentationEverything documentation relatedpackage: react-router

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler

2 participants

@Sheraff@kamalbennani
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(react-router): useMatchRoute w/ React Compiler - #8015
Merged
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Aug 12, 2026
Merged
fix(react-router): useMatchRoute w/ React Compiler#8015
Sheraff merged 8 commits into
mainfrom 
fix-react-router-use-match-route-react-compiler
Conversation
@Sheraff
@SheraffSheraff
commented
Aug 8, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Collaborator
fixes#4499
Summary by CodeRabbit
Bug Fixes
  • Improved useMatchRoute behavior during navigation and server-side rendering.
  • Preserved callback stability across unchanged renders and batched state updates.
  • Ensured route matching responds correctly to location and router status changes.
Tests
  • Added React Compiler end-to-end coverage for route matching.
  • Verified navigation between routes, nested routing, and matched-route display.
  • Added regression coverage for callback identity and state updates.
@nx-cloud
nx-cloudBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
View your CI Pipeline Execution ↗ for commit 3abdab7
CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded12m 22sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 12sView ↗
☁️ Nx Cloud last updated this comment at 2026-08-10 09:39:30 UTC
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
🚀 Changeset Version Preview
No changeset entries found. Merging this PR will not cause a version bump for any packages.
@coderabbitai
coderabbitaiBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
useMatchRoute now updates its client callback when match state changes. SSR returns a direct matcher. The PR adds unit and React Compiler end-to-end coverage for navigation updates.
Changes
React Compiler match route updates
Layer / File(s)Summary
Conditional match callback dependencies
packages/react-router/src/Matches.tsx, packages/react-router/tests/Matches.test.tsx		Client callback dependencies now include location, resolved-location, and status values. SSR uses a direct matcher. Tests verify callback identity across state changes and equivalent updates.
React Compiler test application
e2e/react-router/react-compiler/index.html, e2e/react-router/react-compiler/package.json, e2e/react-router/react-compiler/tsconfig.json, e2e/react-router/react-compiler/vite.config.js, e2e/react-router/react-compiler/src/main.tsx		Adds the React Compiler fixture, route application, navigation links, matched-route output, and router mounting.
React Compiler navigation validation
e2e/react-router/react-compiler/playwright.config.ts, e2e/react-router/react-compiler/tests/use-match-route.spec.ts		Configures Playwright with a Vite test server and Chromium project. The test verifies matched-route output during Home to About to Home navigation.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant Browser
participant RouterProvider
participant useMatchRoute
participant MatchState
Browser->>RouterProvider: Navigate from Home to About
RouterProvider->>MatchState: Update location and route state
MatchState->>useMatchRoute: Update callback dependencies
useMatchRoute->>Browser: Render matched route name

Loading
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly identifies the React Router fix for useMatchRoute with the React Compiler.
Linked Issues check✅ PassedThe changes update useMatchRoute for navigation changes and add tests that verify matched-route updates with the React Compiler [#4499].
Out of Scope Changes check✅ PassedThe implementation, regression tests, and React Compiler E2E fixture directly support the linked issue.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  •  Create stacked PR
  •  Commit on current branch
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
  •  Commit unit tests in branch fix-react-router-use-match-route-react-compiler
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actions
github-actionsBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Bundle Size Benchmarks
  • Commit: bce528b2492c
  • Measured at: 2026-08-10T09:20:55.306Z
  • Baseline source: history:44a8c3e1d2af
  • Dashboard: bundle-size history
The following scenarios have bundle-size changes compared with the baseline:
ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.92 KiB+4 B (+0.00%)83.78 KiB262.68 KiB73.02 KiB███▁▁▁▁▁▁▁▁
react-router.full87.43 KiB+2 B (+0.00%)87.29 KiB274.40 KiB76.08 KiB███▁▁▁▁▁▁▁▁▁
solid-router.minimal33.24 KiB+3 B (+0.01%)33.12 KiB96.52 KiB30.00 KiB███▁▁▁▁▁▁▁▁
solid-router.full38.07 KiB+5 B (+0.01%)37.94 KiB111.15 KiB34.28 KiB███▁▁▁▁▁▁▁▁
vue-router.minimal49.53 KiB+1 B (+0.00%)49.40 KiB138.26 KiB44.63 KiB███▁▁▁▁▁▁▁▁
vue-router.full55.10 KiB+1 B (+0.00%)54.98 KiB156.44 KiB49.64 KiB███▁▁▁▁▁▁▁▁
react-start.full99.92 KiB+3 B (+0.00%)99.79 KiB314.61 KiB86.61 KiB███▁▁▁▁▁▁▁▁▁
react-start.rsbuild.minimal100.07 KiB+2 B (+0.00%)99.90 KiB315.45 KiB86.30 KiB▁▂▂▂▂▆█████
react-start.rsbuild.minimal-iife100.47 KiB+4 B (+0.00%)100.31 KiB316.38 KiB86.67 KiB▁▂▂▂▂▆█████
react-start.rsbuild.full103.39 KiB+2 B (+0.00%)103.22 KiB325.54 KiB88.99 KiB▁▃▃▃▃▆██████
solid-start.minimal46.01 KiB+1 B (+0.00%)45.89 KiB137.57 KiB40.95 KiB███▁▁▁▁▁▁▁▁
solid-start.deferred-hydration49.09 KiB+4 B (+0.01%)45.95 KiB145.04 KiB43.69 KiB███▁▁▁▁▁▁▁▁
solid-start.full51.09 KiB+3 B (+0.01%)50.97 KiB152.96 KiB45.33 KiB███▁▁▁▁▁▁▁▁
vue-start.minimal65.55 KiB+2 B (+0.00%)65.42 KiB189.08 KiB58.40 KiB███▁▁▁▁▁▁▁▁
vue-start.full69.38 KiB+4 B (+0.01%)69.25 KiB201.36 KiB61.60 KiB███▁▁▁▁▁▁▁▁
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better.
@pkg-pr-new
pkg-pr-newBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

More templates
@tanstack/arktype-adapter
npm i https://pkg.pr.new/@tanstack/arktype-adapter@8015

@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@8015

@tanstack/eslint-plugin-start
npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@8015

@tanstack/history
npm i https://pkg.pr.new/@tanstack/history@8015

@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@8015

@tanstack/react-router
npm i https://pkg.pr.new/@tanstack/react-router@8015

@tanstack/react-router-devtools
npm i https://pkg.pr.new/@tanstack/react-router-devtools@8015

@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@8015

@tanstack/react-start
npm i https://pkg.pr.new/@tanstack/react-start@8015

@tanstack/react-start-client
npm i https://pkg.pr.new/@tanstack/react-start-client@8015

@tanstack/react-start-rsc
npm i https://pkg.pr.new/@tanstack/react-start-rsc@8015

@tanstack/react-start-server
npm i https://pkg.pr.new/@tanstack/react-start-server@8015

@tanstack/router-cli
npm i https://pkg.pr.new/@tanstack/router-cli@8015

@tanstack/router-core
npm i https://pkg.pr.new/@tanstack/router-core@8015

@tanstack/router-devtools
npm i https://pkg.pr.new/@tanstack/router-devtools@8015

@tanstack/router-devtools-core
npm i https://pkg.pr.new/@tanstack/router-devtools-core@8015

@tanstack/router-generator
npm i https://pkg.pr.new/@tanstack/router-generator@8015

@tanstack/router-plugin
npm i https://pkg.pr.new/@tanstack/router-plugin@8015

@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@8015

@tanstack/router-utils
npm i https://pkg.pr.new/@tanstack/router-utils@8015

@tanstack/router-vite-plugin
npm i https://pkg.pr.new/@tanstack/router-vite-plugin@8015

@tanstack/solid-router
npm i https://pkg.pr.new/@tanstack/solid-router@8015

@tanstack/solid-router-devtools
npm i https://pkg.pr.new/@tanstack/solid-router-devtools@8015

@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@8015

@tanstack/solid-start
npm i https://pkg.pr.new/@tanstack/solid-start@8015

@tanstack/solid-start-client
npm i https://pkg.pr.new/@tanstack/solid-start-client@8015

@tanstack/solid-start-server
npm i https://pkg.pr.new/@tanstack/solid-start-server@8015

@tanstack/start-client-core
npm i https://pkg.pr.new/@tanstack/start-client-core@8015

@tanstack/start-fn-stubs
npm i https://pkg.pr.new/@tanstack/start-fn-stubs@8015

@tanstack/start-plugin-core
npm i https://pkg.pr.new/@tanstack/start-plugin-core@8015

@tanstack/start-server-core
npm i https://pkg.pr.new/@tanstack/start-server-core@8015

@tanstack/start-static-server-functions
npm i https://pkg.pr.new/@tanstack/start-static-server-functions@8015

@tanstack/start-storage-context
npm i https://pkg.pr.new/@tanstack/start-storage-context@8015

@tanstack/valibot-adapter
npm i https://pkg.pr.new/@tanstack/valibot-adapter@8015

@tanstack/virtual-file-routes
npm i https://pkg.pr.new/@tanstack/virtual-file-routes@8015

@tanstack/vue-router
npm i https://pkg.pr.new/@tanstack/vue-router@8015

@tanstack/vue-router-devtools
npm i https://pkg.pr.new/@tanstack/vue-router-devtools@8015

@tanstack/vue-router-ssr-query
npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@8015

@tanstack/vue-start
npm i https://pkg.pr.new/@tanstack/vue-start@8015

@tanstack/vue-start-client
npm i https://pkg.pr.new/@tanstack/vue-start-client@8015

@tanstack/vue-start-server
npm i https://pkg.pr.new/@tanstack/vue-start-server@8015

@tanstack/zod-adapter
npm i https://pkg.pr.new/@tanstack/zod-adapter@8015

commit: 3abdab7
@codspeed-hq
codspeed-hqBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Merging this PR will regress 0 benchmarks
⚠️Different runtime environments detected
Some benchmarks with significant performance changes were compared across different runtime environments,

which may affect the accuracy of the results.
Open the report in CodSpeed to investigate
⚡ 7 improved benchmarks
❌ 2 (👁 2) regressed benchmarks
✅ 171 untouched benchmarks
Performance Changes
ModeBenchmarkBASEHEADEfficiency
⚡Memorymem client unique-location-churn (solid)436.9 KB341.5 KB+27.94%
⚡Simulationssr server-fn not-found (solid)70.4 ms66.1 ms+6.51%
⚡Simulationssr server-fn POST (solid)73 ms68.6 ms+6.43%
⚡Simulationssr server-fn send-context (solid)70.7 ms67.1 ms+5.36%
⚡Simulationssr server-fn GET (solid)82.6 ms79.3 ms+4.26%
⚡Simulationssr server-fn redirect (solid)55.9 ms54.1 ms+3.25%
⚡Memorymem server error-paths not-found (vue)329.9 KB320.1 KB+3.05%
👁Memorymem server error-paths redirect (vue)293 KB381.4 KB-23.18%
👁Memorymem server error-paths not-found (solid)661.7 KB742.6 KB-10.88%
Tip
Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-react-router-use-match-route-react-compiler (3abdab7) with main (af8dcb8)
Open in CodSpeed
nx-cloud[bot]
nx-cloudBot
reviewed
Aug 8, 2026
View reviewed changes
@nx-cloudnx-cloudBot
left a comment
•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important
At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.
Nx Cloud is proposing a fix for your failed CI:
We fixed the react-hooks/exhaustive-deps ESLint errors in useMatchRoute by moving the useStore calls to the top level of the hook unconditionally, then referencing their return values in a plain array literal passed to useCallback. This ensures both React's rules of hooks and the React Compiler's requirement for unconditional hook invocations are satisfied, while still correctly tracking location, resolvedLocation, and status changes as useCallback dependencies.
Warning
❌ We could not verify this fix.
Suggested Fix changes
diff --git a/packages/react-router/src/Matches.tsx b/packages/react-router/src/Matches.tsx
index 9d7708fc..a8df3ba0 100644
--- a/packages/react-router/src/Matches.tsx+++ b/packages/react-router/src/Matches.tsx@@ -154,6 +154,16 @@ export type UseMatchRouteOptions<
export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
const router = useRouter()
+ const locationHref = useStore(+ router.stores.location,+ (location) => location.href,+ )+ const resolvedLocationHref = useStore(+ router.stores.resolvedLocation,+ (location) => location?.href,+ )+ const status = useStore(router.stores.status, (status) => status)+
return React.useCallback(
<
const TFrom extends string = string,
@@ -174,20 +184,7 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
includeSearch,
})
},
- (isServer ?? router.isServer)- ? [router]- : [- router,- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.location, (location) => location.href),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(- router.stores.resolvedLocation,- (location) => location?.href,- ),- // eslint-disable-next-line react-hooks/rules-of-hooks- useStore(router.stores.status, (status) => status),- ],+ [router, locationHref, resolvedLocationHref, status],
)
}

Apply fix via Nx CloudReject fix via Nx Cloud

Or Apply changes locally with:
npx nx-cloud apply-locally c0UJ-Wu8o

Apply fix locally with your editor ↗View interactive diff ↗


🎓 Learn more about Self-Healing CI on nx.dev
Sheraffand others
added 3 commits
August 8, 2026 22:52
@Sheraff@kamalbennani-aircall
test(react-router): add React Compiler E2E
a3f68ce
Co-authored-by: Kamal Bennani <kamal.bennani@aircall.io>
@Sheraff
disable eslint react-hooks/exhaustive-deps for known static condition…
740dc3b
… w/ DCE
@Sheraff@LadyBluenotes
test(react-router): cover useMatchRoute callback identity
67802df
Co-authored-by: Sarah Gerrard <98355961+LadyBluenotes@users.noreply.github.com>
@socket-security
socket-securityBot
commented
Aug 8, 2026•

edited

Loading

Copy link


Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.
DiffPackageSupply Chain
Security		VulnerabilityQualityMaintenanceLicense
Added@​rolldown/​plugin-babel@​0.2.37310010089100
Addedbabel-plugin-react-compiler@​1.0.01001007990100
View full report
coderabbitai[bot]
coderabbitaiBot
reviewed
Aug 8, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/react-router/react-compiler/package.json`:
- Line 14: Update the internal dependency entries in package.json, including the
`@tanstack/react-router` entry and the other referenced workspace dependency, to
use the workspace:* protocol instead of workspace:^.
In `@e2e/react-router/react-compiler/src/main.tsx`:
- Line 12: Remove the useRouterState import and subscription from the
reproduction, including its useMemo dependency in the relevant component. Keep
the label computation dependent only on matchRoute from useMatchRoute so the E2E
fixture verifies navigation updates through useMatchRoute alone.

🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cdcec0a0-73fa-45ae-b6ac-dffb666f6766
📥 Commits
Reviewing files that changed from the base of the PR and between 6924573 and 67802df.
⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (9)
  • e2e/react-router/react-compiler/index.html
  • e2e/react-router/react-compiler/package.json
  • e2e/react-router/react-compiler/playwright.config.ts
  • e2e/react-router/react-compiler/src/main.tsx
  • e2e/react-router/react-compiler/tests/use-match-route.spec.ts
  • e2e/react-router/react-compiler/tsconfig.json
  • e2e/react-router/react-compiler/vite.config.js
  • packages/react-router/src/Matches.tsx
  • packages/react-router/tests/Matches.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-router/src/Matches.tsx
Comment threade2e/react-router/react-compiler/package.json
Comment threade2e/react-router/react-compiler/src/main.tsx
Outdated

@github-actionsgithub-actionsBot
added
the 
documentation
Everything documentation related
label
Aug 10, 2026
@Sheraff
Sheraff
merged commit 31355ae
into
mainAug 12, 2026

26 checks passed

@Sheraff
Sheraff
deleted the

fix-react-router-use-match-route-react-compiler

branch
August 12, 2026 08:35
@SheraffSheraff
mentioned this pull request
Aug 12, 2026
 Merged

@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

Thank you @Sheraff for taking over my PR 🙇 appreciate it
@Sheraff
Sheraff
commented
Aug 13, 2026

Copy link


Copy Markdown

CollaboratorAuthor
Thank you @Sheraff for taking over my PR 🙇 appreciate it
I tried to credit you as a co-author of the commit, but it looks like your aircall github account (kamalbennani-aircall) was not the correct one to use, sorry
@kamalbennani
kamalbennani
commented
Aug 13, 2026

Copy link


Copy Markdown

That's fine; what matters is that the fix has landed!
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@nx-cloudnx-cloud[bot]nx-cloud[bot] left review comments
@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments

Assignees


No one assigned


Labels

documentationEverything documentation relatedpackage: react-router

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

useMatchRoute not updating when using React Compiler


2 participants

@Sheraff@kamalbennani