test: client nav benchmark can detect granular re-rendering changes

[Sheraff]

in @benchmarks/client-nav performance tests,

• keep params updated every nav
• update search only every other nav

This should allow us to detect perf changes in granular re-rendering

Summary by CodeRabbit

• Tests
  • Updated navigation benchmarks to throttle search parameter updates for more granular re-rendering testing across React, Solid, and Vue implementations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3318878 and c40b454.

📒 Files selected for processing (3)

• benchmarks/client-nav/react/speed.bench.tsx
• benchmarks/client-nav/solid/speed.bench.tsx
• benchmarks/client-nav/vue/speed.bench.tsx

---

📝 Walkthrough

Walkthrough

The client-side navigation speed benchmarks for React, Solid, and Vue have been updated to reduce the frequency of search parameter updates. Instead of updating with each navigation iteration, the search parameter now progresses at half speed using Math.floor(nextId / 2). This allows for more granular re-rendering behavior testing while navigation operations remain otherwise unchanged.

Changes

Cohort / File(s)	Summary
Navigation Benchmarks — Search Parameter Update benchmarks/client-nav/react/speed.bench.tsx, benchmarks/client-nav/solid/speed.bench.tsx, benchmarks/client-nav/vue/speed.bench.tsx	Updated search parameter to use Math.floor(nextId / 2) instead of nextId, resulting in less frequent search state updates for granular re-rendering tests. Solid also changed nextId type from string to number. Explanatory comments added to all three.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

package: react-router, package: solid-router, package: vue-router

Suggested reviewers

• nlynzaad

Poem

🐰 Hopping through benchmarks, we dance with precision,
Search updates slower, a strategic decision,
Every other step, the state now does change,
Re-rendering tests in a granular range! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: updating client navigation benchmarks to detect granular re-rendering by modifying search parameter update frequency.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test-client-nav-benchmark-detects-granular-re-rendering

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

[nx-cloud]

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

---

View your CI Pipeline Execution ↗ for commit c40b454

Command	Status	Duration	Result
nx run @benchmarks/client-nav:test:perf:solid	❌ Failed	1m 14s	View ↗
nx run @benchmarks/ssr:test:perf:vue	✅ Succeeded	2m 9s	View ↗
nx run @benchmarks/ssr:test:perf:solid	✅ Succeeded	1m 53s	View ↗
nx run @benchmarks/ssr:test:perf:react	✅ Succeeded	2m 6s	View ↗
nx run @benchmarks/client-nav:test:perf:vue	✅ Succeeded	1m 24s	View ↗
nx run @benchmarks/client-nav:test:perf:react	✅ Succeeded	1m 27s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-03 14:22:04 UTC

[pkg-pr-new]

More templates

• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc
• 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-rsc
• 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-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/arktype-adapter

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

@tanstack/eslint-plugin-router

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

@tanstack/history

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

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-fn-stubs

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/vue-router

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

@tanstack/vue-router-devtools

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

@tanstack/vue-router-ssr-query

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

@tanstack/vue-start

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

@tanstack/vue-start-client

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

@tanstack/vue-start-server

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

@tanstack/zod-adapter

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

commit: 0cb0ccc

[github-actions]

Bundle Size Benchmarks

• Commit: 33188782e179
• Measured at: 2026-03-03T14:08:14.206Z
• Baseline source: history:33188782e179
• Dashboard: bundle-size history

Scenario	Current (gzip)	Delta vs baseline	Raw	Brotli	Trend
react-router.minimal	86.58 KiB	0 B (0.00%)	272.45 KiB	75.22 KiB	▅▅▅▅▅▅▅▅▅▅▅
react-router.full	89.61 KiB	0 B (0.00%)	282.78 KiB	77.90 KiB	▅▅▅▅▅▅▅▅▅▅▅
solid-router.minimal	35.88 KiB	0 B (0.00%)	107.56 KiB	32.26 KiB	▅▅▅▅▅▅▅▅▅▅▅
solid-router.full	40.21 KiB	0 B (0.00%)	120.61 KiB	36.13 KiB	▅▅▅▅▅▅▅▅▅▅▅
vue-router.minimal	51.75 KiB	0 B (0.00%)	147.54 KiB	46.50 KiB	▅▅▅▅▅▅▅▅▅▅▅
vue-router.full	56.55 KiB	0 B (0.00%)	163.12 KiB	50.86 KiB	▅▅▅▅▅▅▅▅▅▅▅
react-start.minimal	99.11 KiB	0 B (0.00%)	311.58 KiB	85.68 KiB	▅▅▅▅▅▅▅▅▅▅▅
react-start.full	102.50 KiB	0 B (0.00%)	321.39 KiB	88.63 KiB	▁▁▁▁███████
solid-start.minimal	48.19 KiB	0 B (0.00%)	145.13 KiB	42.67 KiB	▅▅▅▅▅▅▅▅▅▅▅
solid-start.full	53.68 KiB	0 B (0.00%)	161.08 KiB	47.37 KiB	▁▁▁▁███████

Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c40b454570

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[codspeed-hq]

Merging this PR will not alter performance

✅ 5 untouched benchmarks

---

_{Comparing test-client-nav-benchmark-detects-granular-re-rendering (c40b454) with main (3318878)}