test(react-start): reproduce React 18 hydration error

[Sheraff]

Summary

• add a React 18 reproduction for root routes with ssr: false and beforeLoad
• add a separate fixture proving the same behavior with loader and no beforeLoad
• cover synchronous, one-microtask, and 50 ms callback timings

Related to #8180.

Bug

With React 18.3.1, a root route using ssr: false reports React error #421 during hydration when the root route also defines either beforeLoad or loader:

This Suspense boundary received an update before it finished hydrating.

The error occurs for synchronous callbacks as well as callbacks that resolve after one microtask or after 50 ms. The same matrix did not report hydration errors with React 19.2.3.

This PR intentionally contains only reproductions, not a fix. The six Playwright assertions are expected to fail until the underlying hydration behavior is fixed.

Verification

• both fixture production builds and type checks pass
• all six React 18 Playwright cases reproduce error #421 as intentional test failures
• a comparative React 19.2.3 matrix produced no console errors, page errors, or hydration warnings

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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 bf79316

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	❌ Failed	10m 35s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	2m 19s	View ↗

---

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	react@​18.3.1
	react-dom@​18.3.1

View full report

[github-actions]

🚀 Changeset Version Preview

3 package(s) bumped directly, 10 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
@tanstack/react-router	1.170.32 → 1.170.33	Changeset
@tanstack/solid-router	1.170.30 → 1.170.31	Changeset
@tanstack/vue-router	1.170.29 → 1.170.30	Changeset
@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/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/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

[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-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/arktype-adapter

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

@tanstack/eslint-plugin-router

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

@tanstack/eslint-plugin-start

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

@tanstack/history

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

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-rsc

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-fn-stubs

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/vue-router

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

@tanstack/vue-router-devtools

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

@tanstack/vue-router-ssr-query

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

@tanstack/vue-start

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

@tanstack/vue-start-client

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

@tanstack/vue-start-server

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

@tanstack/zod-adapter

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

commit: bf79316