fix(vue-router): path useMatch memory leak - #8001
Conversation
|
View your CI Pipeline Execution ↗ for commit f9c85ee
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
📝 WalkthroughWalkthroughVue Router now caches match-store refs per component instance and store, reuses functional component effect scopes, and applies the helper to explicit and nearest match lookups. A regression test covers subscription cleanup during parameter and search navigation. ChangesVue match-store subscription handling
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant ComponentInstance
participant useMatch
participant useMatchStore
participant MatchStore
ComponentInstance->>useMatch: request explicit or nearest match
useMatch->>useMatchStore: resolve match-store ref
useMatchStore->>MatchStore: reuse cached ref or create subscription
MatchStore-->>useMatchStore: reactive match data
useMatchStore-->>useMatch: return match-store ref
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Bundle Size Benchmarks
The following scenarios have bundle-size changes compared with the baseline:
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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@packages/vue-router/src/useMatch.tsx`:
- Around line 17-20: Update the functionalMatchStoreRefs WeakMap value type to
use Readonly<Vue.Ref<unknown>> instead of Readonly<Vue.Ref<any>>, while
preserving the precise type cast at the helper’s return boundary.
🪄 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: a6d05775-5130-4b08-9ed0-6d16d017846f
📒 Files selected for processing (2)
packages/vue-router/src/useMatch.tsxpackages/vue-router/tests/match-subscription-cleanup.test.tsx
| const functionalMatchStoreRefs = new WeakMap< | ||
| object, | ||
| WeakMap<object, Readonly<Vue.Ref<any>>> | ||
| >() |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== file existence and relevant sections =="
if [ -f packages/vue-router/src/useMatch.tsx ]; then
wc -l packages/vue-router/src/useMatch.tsx
sed -n '1,90p' packages/vue-router/src/useMatch.tsx
sed -n '140,185p' packages/vue-router/src/useMatch.tsx
else
echo "packages/vue-router/src/useMatch.tsx not found"
fd -a 'useMatch\.(tsx|ts)$' . || true
fi
echo
echo "== search for WeakMap functionalMatchStoreRefs usage =="
rg -n "functionalMatchStoreRefs|Readonly<Vue\.Ref<unknown>|Readonly<Vue\.Ref<any>>" packages/vue-router/src/useMatch.tsx . --glob '*.tsx' --glob '*.ts' || true
echo
echo "== tsconfig strict-related snippets =="
fd -a 'tsconfig.*json|package.json' . | while read -r f; do
echo "--- $f"
rg -n '"strict"|"moduleResolution"|"types"|"vue"' "$f" || true
doneRepository: TanStack/router
Length of output: 50372
Remove any from the cached ref type.
Vue.Ref<any> disables type checking for every cached store value. Use unknown for the cache boundary, then keep the precise cast at the helper return boundary.
🤖 Prompt for 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.
In `@packages/vue-router/src/useMatch.tsx` around lines 17 - 20, Update the
functionalMatchStoreRefs WeakMap value type to use Readonly<Vue.Ref<unknown>>
instead of Readonly<Vue.Ref<any>>, while preserving the precise type cast at the
helper’s return boundary.
Source: Coding guidelines
Merging this PR will regress 5 benchmarks
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ❌ | Memory | mem client interrupted-navigations (vue) |
495.6 KB | 832.1 KB | -40.44% |
| ❌ | Memory | mem client unique-location-churn (solid) |
341.6 KB | 516.7 KB | -33.88% |
| ❌ | Memory | mem server error-paths unmatched (react) |
273.1 KB | 366.6 KB | -25.49% |
| ❌ | Memory | mem client navigation-churn (solid) |
563.1 KB | 659 KB | -14.56% |
| ❌ | Memory | mem server server-fn-churn (react) |
265 KB | 275.6 KB | -3.84% |
| ⚡ | Memory | mem server server-fn-churn (vue) |
3,927.3 KB | 262.8 KB | ×15 |
| ⚡ | Memory | mem client unique-location-churn (vue) |
981.7 KB | 379 KB | ×2.6 |
| ⚡ | Memory | mem server peak-large-page (react) |
2,064 KB | 955.3 KB | ×2.2 |
| ⚡ | Memory | mem client navigation-churn (vue) |
1,232.4 KB | 859.3 KB | +43.41% |
| ⚡ | Memory | mem server error-paths not-found (react) |
260.9 KB | 250.9 KB | +3.98% |
| ⚡ | Memory | mem client loader-data-retention (vue) |
979.7 KB | 944.8 KB | +3.7% |
| ⚡ | Memory | mem client preload-churn (vue) |
739 KB | 713 KB | +3.65% |
Tip
Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-vue-router-use-match-leak (f9c85ee) with main (4fa1df7)
1 participant
Summary by CodeRabbit