Skip to content

perf(react-router): direct export of CatchBoundary class component, remove function wrapper - #8068

Merged
Sheraff merged 2 commits into
mainfrom
bundle-react-router-direct-export-class-catchboundary-component
Aug 15, 2026
Merged

perf(react-router): direct export of CatchBoundary class component, remove function wrapper#8068
Sheraff merged 2 commits into
mainfrom
bundle-react-router-direct-export-class-catchboundary-component

Conversation

@Sheraff

@SheraffSheraff commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

minor change to reduce bundle size.
technically not exactly the same at runtime, but for all intents and purposes it should be equivalent.

Summary by CodeRabbit

  • New Features

    • CatchBoundary is now directly available as a React class component, providing a more consistent integration option for applications using React Router.
  • Bug Fixes

    • Improved the component’s public export behavior without changing its supported props or error-handling capabilities.
  • Documentation

    • Added a patch release note documenting the updated CatchBoundary export.

@nx-cloud

nx-cloudBot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

View your CI Pipeline Execution ↗ for commit fb35c8e

CommandStatusDurationResult
nx affected --targets=test:eslint,test:unit,tes...✅ Succeeded15m 26sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded2m 10sView ↗

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

@github-actions

github-actionsBot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

4 package(s) bumped directly, 19 bumped as dependents.

🟩 Patch bumps

PackageVersionReason
@tanstack/react-router1.170.28 → 1.170.29Changeset
@tanstack/router-core1.171.23 → 1.171.24Changeset
@tanstack/solid-router1.170.26 → 1.170.27Changeset
@tanstack/vue-router1.170.25 → 1.170.26Changeset
@tanstack/react-start1.168.45 → 1.168.46Dependent
@tanstack/react-start-client1.168.26 → 1.168.27Dependent
@tanstack/react-start-rsc0.1.44 → 0.1.45Dependent
@tanstack/react-start-server1.167.33 → 1.167.34Dependent
@tanstack/router-cli1.167.29 → 1.167.30Dependent
@tanstack/router-generator1.167.29 → 1.167.30Dependent
@tanstack/router-plugin1.168.31 → 1.168.32Dependent
@tanstack/router-vite-plugin1.167.31 → 1.167.32Dependent
@tanstack/solid-start1.168.43 → 1.168.44Dependent
@tanstack/solid-start-client1.168.25 → 1.168.26Dependent
@tanstack/solid-start-server1.167.32 → 1.167.33Dependent
@tanstack/start-client-core1.170.23 → 1.170.24Dependent
@tanstack/start-plugin-core1.171.35 → 1.171.36Dependent
@tanstack/start-server-core1.169.27 → 1.169.28Dependent
@tanstack/start-static-server-functions1.167.28 → 1.167.29Dependent
@tanstack/start-storage-context1.167.25 → 1.167.26Dependent
@tanstack/vue-start1.168.42 → 1.168.43Dependent
@tanstack/vue-start-client1.167.28 → 1.167.29Dependent
@tanstack/vue-start-server1.167.32 → 1.167.33Dependent

@coderabbitai

coderabbitaiBot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 90a7cadb-846b-49f7-97af-4669e1f23b8b

📥 Commits

Reviewing files that changed from the base of the PR and between 53b63cf and 92b5e04.

📒 Files selected for processing (2)
  • .changeset/whole-bikes-grin.md
  • packages/react-router/src/CatchBoundary.tsx

📝 Walkthrough

Walkthrough

CatchBoundary is now exported directly as a React component class. The patch changeset records this API change.

Changes

CatchBoundary export

Layer / File(s)Summary
Direct class export and release metadata
packages/react-router/src/CatchBoundary.tsx, .changeset/whole-bikes-grin.md
The functional wrapper is removed. The CatchBoundary React component class is exported directly. A patch changeset records the change.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk:⚪ Minimal · up to 92b5e

This localized change directly exports the CatchBoundary class component and removes its function wrapper; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly and concisely describes the main change: directly exporting the CatchBoundary class component and removing its function wrapper.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch bundle-react-router-direct-export-class-catchboundary-component

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

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actionsBot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Bundle Size Benchmarks

  • Commit: 1fa995f3b7a4
  • Measured at: 2026-08-14T21:48:08.072Z
  • Baseline source: history:bdaf73a4063e
  • Dashboard: bundle-size history

The following scenarios have bundle-size changes compared with the baseline:

ScenarioCurrent (gzip)Delta vs baselineInitial gzipRawBrotliTrend
react-router.minimal83.83 KiB-12 B (-0.01%)83.69 KiB262.42 KiB72.92 KiB█▂▂▂▂▂▂▆▆▅▂▁
react-router.full87.32 KiB-10 B (-0.01%)87.18 KiB274.13 KiB75.85 KiB█▃▃▃▃▃▃▆▆▄▂▁
react-start.minimal96.62 KiB-19 B (-0.02%)96.48 KiB304.65 KiB83.73 KiB█▃▃▃▃▃▃▆▆▄▂▁
react-start.deferred-hydration97.35 KiB-24 B (-0.02%)96.51 KiB306.01 KiB84.35 KiB█▃▃▃▃▃▃▆▆▄▂▁
react-start.full99.80 KiB+2 B (+0.00%)99.67 KiB314.37 KiB86.51 KiB█▃▃▃▃▃▃▆▆▃▁▁
react-start.rsbuild.minimal99.96 KiB-15 B (-0.01%)99.79 KiB315.03 KiB86.24 KiB█▁▁▁▁▁▁▆▆▅▂▁
react-start.rsbuild.minimal-iife100.37 KiB-14 B (-0.01%)100.21 KiB315.97 KiB86.58 KiB█▁▁▁▁▁▁▆▆▆▂▁
react-start.rsbuild.full103.29 KiB-11 B (-0.01%)103.12 KiB325.12 KiB88.94 KiB█▁▁▁▁▁▁▅▅▅▂▁

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.

@pkg-pr-new

pkg-pr-newBot commented Aug 14, 2026

Copy link
Copy Markdown
More templates

@tanstack/arktype-adapter

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

@tanstack/eslint-plugin-router

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

@tanstack/eslint-plugin-start

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

@tanstack/history

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

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-rsc

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-fn-stubs

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/vue-router

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

@tanstack/vue-router-devtools

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

@tanstack/vue-router-ssr-query

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

@tanstack/vue-start

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

@tanstack/vue-start-client

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

@tanstack/vue-start-server

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

@tanstack/zod-adapter

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

commit: fb35c8e

@codspeed-hq

codspeed-hqBot commented Aug 14, 2026

Copy link
Copy Markdown

Merging this PR will degrade performance by 12.56%

⚠️Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 7 improved benchmarks
❌ 10 (👁 10) regressed benchmarks
✅ 163 untouched benchmarks

Performance Changes

ModeBenchmarkBASEHEADEfficiency
Memorymem server error-paths not-found (vue)2,190.4 KB485.6 KB×4.5
Simulationclient-mount loop (react)129.2 ms119.3 ms+8.27%
Memorymem server server-fn-churn (react)395.7 KB376.3 KB+5.16%
Simulationclient-search-params navigation loop (react)177 ms169.6 ms+4.36%
Memorymem client navigation-churn (vue)1.7 MB1.6 MB+4.33%
Simulationssr control-flow route headers (react)308.5 ms299.2 ms+3.12%
👁Memorymem server error-paths redirect (vue)419.3 KB473.7 KB-11.48%
👁Memorymem server peak-large-page (vue)1,010.6 KB1,097.6 KB-7.93%
👁Memorymem server server-fn-churn (vue)325.3 KB4,856.3 KB-93.3%
👁Memorymem server error-paths unmatched (react)415.8 KB777.8 KB-46.54%
👁Memorymem server error-paths not-found (solid)584.7 KB567.4 KB+3.05%
👁Memorymem server error-paths redirect (solid)370.1 KB392.8 KB-5.78%
👁Simulationclient-side navigation loop (react)126.8 ms142.9 ms-11.26%
👁Simulationclient-async-pipeline navigation loop (react)100.1 ms107.3 ms-6.67%
👁Simulationclient-links navigation loop (react)295.6 ms308 ms-4.01%
👁Memorymem client unique-location-churn (vue)487.9 KB530.2 KB-7.97%
👁Memorymem client navigation-churn (solid)677 KB793.3 KB-14.66%

Tip

Curious why this is faster? Comment @codspeedbot explain why this is faster on this PR, or directly use the CodSpeed MCP with your agent.


Comparing bundle-react-router-direct-export-class-catchboundary-component (fb35c8e) with main (bdaf73a)

Open in CodSpeed

@SheraffSheraff changed the title bundle(react-router): direct export of CatchBoundary class component, remove function wrapperperf(react-router): direct export of CatchBoundary class component, remove function wrapperAug 14, 2026
@Sheraff
Sheraff merged commit f75cada into mainAug 15, 2026
26 checks passed
@Sheraff
Sheraff deleted the bundle-react-router-direct-export-class-catchboundary-component branch August 15, 2026 06:52
@github-actionsgithub-actionsBot mentioned this pull request Aug 15, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@Sheraff