refactor(router-core): router.load onReady match transition performance#6813
Open
refactor(router-core): router.load onReady match transition performance#6813
Conversation
Contributor
📝 WalkthroughWalkthroughThe change modifies the router's Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run @benchmarks/client-nav:test:perf:solid |
❌ Failed | 1m 15s | View ↗ |
nx run @benchmarks/ssr:test:perf:vue |
✅ Succeeded | 2m 10s | View ↗ |
nx run @benchmarks/ssr:test:perf:solid |
✅ Succeeded | 1m 54s | View ↗ |
nx run @benchmarks/ssr:test:perf:react |
✅ Succeeded | 2m 3s | View ↗ |
nx run @benchmarks/client-nav:test:perf:vue |
✅ Succeeded | 1m 24s | View ↗ |
nx run @benchmarks/client-nav:test:perf:react |
✅ Succeeded | 7m 19s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-03-03 18:10:24 UTC
Bundle Size Benchmarks
Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/router-core/src/router.ts (2)
2427-2452: Precompute membership sets to remove repeated scans in hot transition path.This block repeatedly calls
.some(...)inside filters/loops. PrecomputingSets for IDs/routeIds keeps the commit path linear and better aligned with the PR’s performance goal.⚡ Suggested refactor
- if (mountPending) { - exitingMatches = currentMatches.filter( - (match) => - !pendingMatches.some((d) => d.id === match.id), - ) + if (mountPending) { + const pendingIds = new Set( + pendingMatches.map((d) => d.id), + ) + const pendingRouteIds = new Set( + pendingMatches.map((d) => d.routeId), + ) + const currentRouteIds = new Set( + currentMatches.map((d) => d.routeId), + ) + + exitingMatches = currentMatches.filter( + (match) => !pendingIds.has(match.id), + ) // Lifecycle-hook identity: routeId only (route presence in tree) hookExitingMatches = currentMatches.filter( - (match) => - !pendingMatches.some( - (d) => d.routeId === match.routeId, - ), + (match) => !pendingRouteIds.has(match.routeId), ) hookEnteringMatches = [] hookStayingMatches = [] for (const match of pendingMatches) { - if ( - currentMatches.some( - (d) => d.routeId === match.routeId, - ) - ) { + if (currentRouteIds.has(match.routeId)) { hookStayingMatches.push(match) } else { hookEnteringMatches.push(match) } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/router-core/src/router.ts` around lines 2427 - 2452, The current transition code repeatedly calls pendingMatches.some(...) inside filters/loops (affecting exitingMatches, hookExitingMatches and the loop that builds hookEnteringMatches/hookStayingMatches), causing repeated scans; precompute two Sets (e.g., pendingIdSet and pendingRouteIdSet) from pendingMatches once before the filters/loop and replace .some checks with pendingIdSet.has(match.id) and pendingRouteIdSet.has(match.routeId) respectively so exitingMatches, hookExitingMatches, hookEnteringMatches and hookStayingMatches are computed with O(n) scans using currentMatches and pendingMatches only once each.
2413-2415: Eliminate type assertion/cast escapes by using default empty arrays instead of null.In strict mode,
exitingMatches!at line 2472 and(matches as null | Array<AnyRouteMatch>)at line 2493 bypass type narrowing. Refactor the hook variable declarations to initialize as empty arrays rather than null, which enables static type safety without assertions:
- Change
let hookExitingMatches: Array<AnyRouteMatch> | null = nulland related declarations to use[]as defaults- For
exitingMatches, ensure the variable is always assigned an array (empty or populated) so the!assertion at line 2472 becomes unnecessary- This allows the
forEachat line 2493 to work without the type castApplies to lines 2413–2415, 2472, and 2493.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/router-core/src/router.ts` around lines 2413 - 2415, The hook match variables hookExitingMatches, hookEnteringMatches, and hookStayingMatches should be initialized to empty arrays rather than null to avoid type-assertion escapes; change their declarations from "Array<AnyRouteMatch> | null = null" to just "Array<AnyRouteMatch> = []" (or let ... = []), ensure any use of exitingMatches is always assigned an array (so remove the "exitingMatches!" non-null assertion in the code that references it), and remove the "(matches as null | Array<AnyRouteMatch>)" cast by ensuring matches is typed/handled as an array so the forEach (and similar iterations) can operate without casts.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/router-core/src/router.ts`:
- Around line 2427-2452: The current transition code repeatedly calls
pendingMatches.some(...) inside filters/loops (affecting exitingMatches,
hookExitingMatches and the loop that builds
hookEnteringMatches/hookStayingMatches), causing repeated scans; precompute two
Sets (e.g., pendingIdSet and pendingRouteIdSet) from pendingMatches once before
the filters/loop and replace .some checks with pendingIdSet.has(match.id) and
pendingRouteIdSet.has(match.routeId) respectively so exitingMatches,
hookExitingMatches, hookEnteringMatches and hookStayingMatches are computed with
O(n) scans using currentMatches and pendingMatches only once each.
- Around line 2413-2415: The hook match variables hookExitingMatches,
hookEnteringMatches, and hookStayingMatches should be initialized to empty
arrays rather than null to avoid type-assertion escapes; change their
declarations from "Array<AnyRouteMatch> | null = null" to just
"Array<AnyRouteMatch> = []" (or let ... = []), ensure any use of exitingMatches
is always assigned an array (so remove the "exitingMatches!" non-null assertion
in the code that references it), and remove the "(matches as null |
Array<AnyRouteMatch>)" cast by ensuring matches is typed/handled as an array so
the forEach (and similar iterations) can operate without casts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Basic "variable re-ordering" to skip some computation when possible in
router>load>loadMatches>onReady>startTransitionSummary by CodeRabbit