fix(solid-router): Should not remount deps when remountDeps does not change

[birkskyum]

closes #5683

• solid-router - excessive remounts #5683

Summary by CodeRabbit

• Tests

  • Re-enabled a previously skipped end-to-end test so it now runs as part of the suite.

• Bug Fixes

  • Restored correct component remount behavior so components remount when their keys change, preventing stale instances.

[coderabbitai]

Walkthrough

Re-enables an end-to-end test and changes Match rendering to compute a componentKey (from matchState().key or match id) and render the matched component via a keyed wrapper, enabling controlled remount behavior based on the computed key.

Changes

Cohort / File(s)	Summary
Test re-enablement e2e/solid-router/basic-file-based/tests/app.spec.ts	Removed test.skip so "Should not remount deps when remountDeps does not change" runs as part of the suite.
Match component keying logic packages/solid-router/src/Match.tsx	Adds computed componentKey (from matchState().key or fallback match.id) and a keyedOut wrapper that renders the component inside a keyed Show; replaces prior direct rendering with keyed rendering to control remounts when the key changes.

Sequence Diagram(s)

sequenceDiagram
    participant Router as Router / Match
    participant MatchComp as Match.tsx logic
    participant Component as Matched Component

    Note over Router,Component: Before — direct render (no controlled keying)
    Router->>MatchComp: matchState() updates
    MatchComp->>Component: render (no explicit remount key)

    Note over Router,Component: After — compute key and conditionally remount
    Router->>MatchComp: matchState() updates
    MatchComp->>MatchComp: compute componentKey = matchState().key || match.id
    MatchComp->>MatchComp: wrap render in keyed Show (keyedOut)
    alt componentKey unchanged
        MatchComp->>Component: keep existing instance (no remount)
    else componentKey changed
        MatchComp->>Component: remount new instance
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Pay attention to how componentKey is derived and fallback behavior.
• Verify the keyed wrapper (keyedOut) integrates correctly with Solid's lifecycle and Show semantics.
• Confirm the re-enabled test reliably validates the intended remount behavior.

Possibly related PRs

• test(router): make the remount test more thorough #5684 — touches the same e2e remount test and remount behavior in solid-router.

Suggested reviewers

• brenelz
• schiller-manuel

Poem

🐇 A little hop through code tonight,
I set the keys and made things right.
When keys stay steady, mounts stay still,
When keys do change, they start anew—what a thrill! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "fix(solid-router): Should not remount deps when remountDeps does not change" directly references the core issue being addressed in the linked issue #5683 and mirrors the exact test name that is being unskipped. The title clearly conveys the primary fix: preventing unnecessary remounts when remountDeps values remain unchanged. This is specific, concise, and accurately represents the main change throughout the pull request.
Linked Issues Check	✅ Passed	The pull request addresses all primary requirements from issue #5683. The changes include unskipping the test "Should not remount deps when remountDeps does not change" in e2e/solid-router/basic-file-based/tests/app.spec.ts [#5683], and modifying packages/solid-router/src/Match.tsx to implement the fix by adding a computed componentKey and keyedOut wrapper that enables proper remount behavior when the key changes [#5683]. These changes directly implement the fix for excessive remounting so that dependencies are not remounted when remountDeps values remain unchanged.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to the objectives outlined in the linked issue #5683. The unskipping of the test and the modifications to Match.tsx to add remount logic are both in scope as they constitute the core fix for the excessive remounting problem. No unrelated changes, refactoring, or modifications beyond the scope of fixing the remount behavior have been introduced.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix(solid-router)--fix-remounting

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70a40a9 and 2c5fa6a.

📒 Files selected for processing (1)

• packages/solid-router/src/Match.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/solid-router/src/Match.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 2c5fa6a

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	7m 39s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	30s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-30 03:13:09 UTC

[pkg-pr-new]

More templates

• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5693

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5693

@tanstack/eslint-plugin-router

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

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5693

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5693

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5693

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5693

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5693

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5693

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5693

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5693

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5693

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5693

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5693

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5693

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5693

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5693

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5693

commit: 2c5fa6a