perf(router-devtools-core): avoid idle polling and repeated styles

[LadyBluenotes]

🎯 Changes

The floating devtools panel scans the route cache every 500 ms even while closed, and route rows repeatedly construct the same static styles. Pause polling while closed, refresh immediately on reopening, and reuse shared styles within each devtools mount. Style generation stays in the lazy-loaded panel chunk; each mount has its own weak cache key so styles can be regenerated on remount.

The regression fixture reduces four closed-panel cache scans to zero over 2,000 ms of fake time. With three child routes and one cached match, shared-style construction falls from 16 calls to one for the floating panel and from 15 to one for the standalone panel. These are operation counts, not browser latency measurements.

Related to #6729.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with the relevant test commands, or tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Performance

  • Route-cache polling now pauses while the floating devtools panel is closed and resumes immediately when reopened.
  • Devtools styles are reused across remounts, reducing duplicate style generation.

• Bug Fixes

  • Shared and dynamic styles are correctly applied to each shadow root while respecting panel visibility states.

• Tests

  • Added coverage for polling behavior, style reuse, and shadow-root styling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: dec19893-fc8c-4fa4-899a-b14a8dbb0011

📥 Commits

Reviewing files that changed from the base of the PR and between 9035abc and 5c6ab05.

📒 Files selected for processing (7)

• .changeset/polite-loops-send.md
• packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx
• packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx
• packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx
• packages/router-devtools-core/src/context.ts
• packages/router-devtools-core/src/useStyles.tsx
• packages/router-devtools-core/tests/devtools-performance.test.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Changes

Devtools performance behavior

Layer / File(s)	Summary
Visibility-aware cache polling packages/router-devtools-core/src/BaseTanStackRouterDevtoolsPanel.tsx, packages/router-devtools-core/tests/devtools-performance.test.ts	The panel separates isOpen from other props and skips 500ms cache polling while closed. Tests cover reopening, data refresh, closing, and unmounting.
Shared style ownership and mounting packages/router-devtools-core/src/context.ts, packages/router-devtools-core/src/useStyles.tsx, packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx, packages/router-devtools-core/src/TanStackRouterDevtoolsPanelCore.tsx, packages/router-devtools-core/tests/devtools-performance.test.ts, .changeset/polite-loops-send.md	A style context and per-owner WeakMap cache reuse generated styles across mounts. Tests cover floating and standalone panels and separate shadow roots. A patch changeset records the update.

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

Merge Risk: ⚪ Minimal · up to 5c6ab

Devtools now avoids cache polling while closed, refreshes when reopened, and reuses styles within a mount. The covered behavior preserves panel updates and style installation without an identified merge-blocking risk.

Sequence Diagram(s)

Cache polling lifecycle

sequenceDiagram
  participant Panel
  participant Router
  participant Cache
  Panel->>Router: Read router cache
  Router->>Cache: Access cache values
  Panel->>Cache: Poll every 500ms while open
  Panel->>Cache: Stop polling while closed

Loading

Shared style mounting

sequenceDiagram
  participant DevtoolsCore
  participant StylesContext
  participant useStyles
  participant ShadowRoot
  DevtoolsCore->>StylesContext: Provide mount owner
  StylesContext->>useStyles: Expose owner
  useStyles->>useStyles: Cache styles per owner
  useStyles->>ShadowRoot: Install shared and dynamic styles

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 6 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main changes: it identifies the performance scope and states that idle polling and repeated style construction are avoided.
Description check	✅ Passed	The description follows the repository template. It explains the changes and motivation, includes the required checklist, documents testing, and confirms the changeset.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 6 files. (1 skipped: 1 unsupported.)

• Fix all pre-merge checks with AI

✨ 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 perf/devtools-idle-and-styles

---

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.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5c6ab05

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

---

☁️ Nx Cloud last updated this comment at 2026-09-06 16:21:35 UTC

[github-actions]

🚀 Changeset Version Preview

8 package(s) bumped directly, 22 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
@tanstack/history	1.162.1 → 1.162.2	Changeset
@tanstack/nitro-v2-vite-plugin	1.155.0 → 1.155.1	Changeset
@tanstack/react-router	1.170.32 → 1.170.33	Changeset
@tanstack/router-core	1.171.27 → 1.171.28	Changeset
@tanstack/router-devtools-core	1.168.1 → 1.168.2	Changeset
@tanstack/solid-router	1.170.30 → 1.170.31	Changeset
@tanstack/start-plugin-core	1.171.39 → 1.171.40	Changeset
@tanstack/vue-router	1.170.29 → 1.170.30	Changeset
@tanstack/react-router-devtools	1.167.1 → 1.167.2	Dependent
@tanstack/react-start	1.168.49 → 1.168.50	Dependent
@tanstack/react-start-client	1.168.30 → 1.168.31	Dependent
@tanstack/react-start-rsc	0.1.48 → 0.1.49	Dependent
@tanstack/react-start-server	1.167.37 → 1.167.38	Dependent
@tanstack/router-cli	1.167.33 → 1.167.34	Dependent
@tanstack/router-devtools	1.167.1 → 1.167.2	Dependent
@tanstack/router-generator	1.167.33 → 1.167.34	Dependent
@tanstack/router-plugin	1.168.35 → 1.168.36	Dependent
@tanstack/router-vite-plugin	1.167.35 → 1.167.36	Dependent
@tanstack/solid-router-devtools	1.167.1 → 1.167.2	Dependent
@tanstack/solid-start	1.168.47 → 1.168.48	Dependent
@tanstack/solid-start-client	1.168.29 → 1.168.30	Dependent
@tanstack/solid-start-server	1.167.36 → 1.167.37	Dependent
@tanstack/start-client-core	1.170.27 → 1.170.28	Dependent
@tanstack/start-server-core	1.169.31 → 1.169.32	Dependent
@tanstack/start-static-server-functions	1.167.32 → 1.167.33	Dependent
@tanstack/start-storage-context	1.167.29 → 1.167.30	Dependent
@tanstack/vue-router-devtools	1.167.1 → 1.167.2	Dependent
@tanstack/vue-start	1.168.46 → 1.168.47	Dependent
@tanstack/vue-start-client	1.167.32 → 1.167.33	Dependent
@tanstack/vue-start-server	1.167.36 → 1.167.37	Dependent

[github-actions]

Bundle Size Benchmarks

This pull request does not affect bundle size in any measured scenario.

[pkg-pr-new]

More templates

• 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-router-react-example-basic-authjs
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsbuild
• 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-example-rscs
• 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-router-solid-example-authenticated-routes
• tanstack-router-solid-example-authenticated-routes-firebase
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-default-search-params
• 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-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-basic-virtual-file-based
• tanstack-router-solid-example-basic-virtual-inside-file-based
• tanstack-router-solid-example-deferred-data
• tanstack-router-solid-i18n-paraglide
• tanstack-router-solid-example-kitchen-sink
• 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-large-file-based
• tanstack-router-solid-example-location-masking
• tanstack-router-solid-example-navigation-blocking
• tanstack-router-solid-example-quickstart
• tanstack-router-solid-example-quickstart-esbuild-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-router-solid-example-quickstart-rspack-file-based
• tanstack-router-solid-example-quickstart-webpack-file-based
• @tanstack/router-solid-mono-simple
• router-solid-mono-simple-lazy
• router-solid-monorepo-solid-query
• tanstack-router-solid-example-scroll-restoration
• tanstack-solid-router-search-validator-adapters
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-authjs
• 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-solid-start-bun-hosting
• tanstack-solid-start-example-convex-better-auth
• tanstack-solid-start-example-counter
• tanstack-solid-start-i18n-paraglide
• tanstack-solid-start-example-large
• tanstack-solid-start-streaming-data-from-server-functions
• tanstack-solid-start-example-supabase-basic
• tanstack-solid-start-tailwind-v4
• tanstack-router-solid-example-view-transitions
• tanstack-router-solid-example-with-framer-motion
• tanstack-router-solid-example-with-trpc
• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc

@tanstack/arktype-adapter

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

@tanstack/eslint-plugin-router

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

@tanstack/eslint-plugin-start

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

@tanstack/history

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

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-rsc

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-fn-stubs

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/vue-router

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

@tanstack/vue-router-devtools

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

@tanstack/vue-router-ssr-query

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

@tanstack/vue-start

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

@tanstack/vue-start-client

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

@tanstack/vue-start-server

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

@tanstack/zod-adapter

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

commit: 5c6ab05

[codspeed-hq]

Merging this PR will not alter performance

✅ 180 untouched benchmarks

---

_{Comparing perf/devtools-idle-and-styles (5c6ab05) with main (9035abc)}