Bug: Streamed hydration hangs when consecutive Suspense boundaries suspend during streaming

This issue has been created since 2022-11-18.

When streaming from the server, I've encountered a bug where client-side hydration with hydrateRoot() will seemingly "pause" and never complete, leaving html tags with hidden and id attributes hanging around. Any user events cause this error to show, likely because the app still thinks it's in the middle of hydrating. Interestingly enough, if you switch the promise timeouts in routeConfig so that post resolves earlier than posts, then you will not have this issue. So to summarize for this example: if only one boundary suspends, all is well, but if two boundaries suspend, we see this bug.

Hoping this is something stupid on my part, but stuck nonetheless.

React version: 18.2.0

Steps To Reproduce

  1. Load the example at https://stackblitz.com/github/tanstack/router/tree/beta/examples/react/basic-ssr?file=src%2FApp.tsx
  2. Paste /posts/1 into the preview URL to trigger a server-side load of that full URL
  3. Inspect the dom

Link to code example:

https://stackblitz.com/github/tanstack/router/tree/beta/examples/react/basic-ssr?file=src%2FApp.tsx

The current behavior

The markup is not visible (some of it is hidden)

The expected behavior

All of the markup should be visible

gaearon wrote this answer on 2022-11-20

It would be great to have a self-contained example (no third party code) to confirm whether it's a React bug or not.

hosseinmd wrote this answer on 2022-11-20

This worked

export const routeConfig = createRouteConfig().addChildren([
  postRoute,
  indexRoute,
]);

Maybe the issue is related to @tanstack/react-router

tannerlinsley wrote this answer on 2022-11-20

This worked

export const routeConfig = createRouteConfig().addChildren([
  postRoute,
  indexRoute,
]);

Maybe the issue is related to @tanstack/react-router

This only triggers one suspense boundary. So that’s expected.

tannerlinsley wrote this answer on 2022-11-20

It would be great to have a self-contained example (no third party code) to confirm whether it's a React bug or not.

I fully agree. I’ll do my best. But if the issue is with the way I’m implanting suspenseful patterns in the library I would equally want to know why.

gaearon wrote this answer on 2022-11-20

Yea, I just mean that if there's a smaller example then (even if the issue is with the pattern) I'd be able to tell why. In fact just copy pasting the library into the sandbox so that we can start narrowing it down would be helpful. The issue is just that since it's on npm, it's impossible to work by removing pieces and seeing what's essential to the problem.

tannerlinsley wrote this answer on 2022-11-20
tannerlinsley wrote this answer on 2022-11-21

Got a very watered down example that I'm using to bridge the gaps, so it's still a WIP, but its here: https://stackblitz.com/edit/github-k3gulh?file=src%2FApp.tsx,src%2Fentry-server.tsx,src%2Fstore.tsx,src%2Fentry-client.tsx

Something I noticed: The working example streams a script tag in that looks like this:

function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")

But I don't see anything similar in my buggy example. Is this a helpful difference?

gaearon wrote this answer on 2022-11-21

Re: #25710 (comment), just to clarify — what is the expected behavior and what is the actual behavior?

tannerlinsley wrote this answer on 2022-11-22

#25710 (comment) Works fine and as expected. So now I’m trying to find the differences between the two.

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-10
Star Count 198882
Watcher Count 6638
Fork Count 41302
Issue Count 1120

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
[BUG] Circle Score Indicators break when toggled 0 2021-07-15 2022-11-11
[BUG] Version number not updated 0 2021-07-16 2022-11-12
[BUG] Champion Select 0 2021-07-15 2022-10-02
[BUG] Dragon Icon on Score Display 0 2021-07-16 2022-11-13
Support pictures copied from the file explorer (and not only from the clipboard) 1 2020-09-25 2022-10-29
Lack of nx_6lowpan.h file. 1 2021-03-03 2022-07-22
Can't find files listed in documentation 2 2021-01-13 2022-08-15
can't find cortex m4 port‘s files for AC6 compiler 1 2021-02-20 2022-07-22
Support C++ references 2 2021-01-09 2022-10-29
Items: Vendor/Supplier 0 2021-12-18 2022-10-31
Can't use italian keyboard layout in GUI apps 9 2021-12-26 2022-11-25
Repeat Grids with homogenous component instances export incorrectly 2 2020-12-15 2022-11-21
Serialization error when creating entries using the management API 5 2020-04-30 2022-10-12
k8s_drain delete option 'delete_emptydir_data' not available 2 2022-03-08 2022-08-21
SolidJS adapter context provider may re-render children sometimes when paired with Suspense 2 2022-04-09 2022-11-28
Settings heading size incorrect 1 2021-01-27 2022-12-10
Is bfloat16 supported? 9 2022-03-09 2022-10-29
Libraries: Updates failing with error (again...) 1 2021-12-03 2022-09-09
Hydration Error at use teleport 8 2021-11-14 2022-09-25
DietPi-Software | PiHole - new installer 3 2022-07-25 2022-10-28
WindowIndicator and Identity indicators don't implement IIndicatorWarmUpPeriodProvider 0 2021-10-14 2022-07-07
$t cannot translate the global value when I have a locel i18n block in component 1 2020-03-04 2022-11-27
HD version? 2 2020-12-10 2022-01-16
Sticky columns (or headers) in data tables 2 2022-09-12 2022-12-09
404 when rendering tile 2 2021-12-03 2022-10-11
estimated azure costs 3 2022-08-05 2022-11-29
Where is the tabwidth of the file length rule set in sonarquebe? 2 2022-03-23 2022-11-22
Issue building on M1 Mac 5 2021-12-29 2022-10-06
Umbraco 9.5.1 - VS publish deploy issue 4 2022-06-13 2022-08-22
ReleaseBuildDocumentation folder 1 2022-08-15 2022-11-23
"behavior.avoid_block" missing docs on "target_selection_method" supported values 0 2022-08-13 2022-11-23
[GameTest] entityHurt and entityHit event doesn't trigger when the player dies 3 2022-08-18 2022-11-23
[Documentation Issue] Please provide up-to-date docs on "minecraft:interact" 0 2022-08-20 2022-11-23
Bug: "Certificate Expiry Notification" reset when restoring/importing monitors 0 2022-07-15 2022-11-27
Automatic backup to FTP over time triggered or on setting change 3 2022-01-03 2022-11-07
[Portuguese] Localize 'Shift Left' 2 2022-08-14 2022-08-26
[Portuguese] Localize 'Service Proxy' 0 2022-08-14 2022-11-12
HWE support package name convention 1 2020-01-16 2022-12-03
Видео обзор библиотеки? 3 2020-12-10 2022-12-02
Input-Table是否可以加上虚拟滚动 0 2022-11-29 2022-12-02
Need help , there is nowhere mentioned how to add a student as a user. 7 2021-05-16 2022-11-01
new cachetools version (5.0.0+) can't work with google-auth 1 2021-12-27 2022-11-25
index page lacks instructions for downloading the connector 1 2021-02-26 2022-08-27
Consider having a more discoverable/convenient way of opting into or out of the interactive window experience. 0 2022-04-11 2022-09-17
Line ending backslash in """ causes later line breaks to also be removed 1 2022-11-08 2022-12-05
No unconfigured Bluetooth adapters found 1 2022-11-25 2022-11-20
Update Spring Cloud AWS dependency in Kinesis binder 3 2022-11-30 2022-12-05
Add a flag to enable or disable dbg for release builds. 9 2019-06-21 2022-12-02
Having a call for blogs or similar 8 2022-06-17 2022-11-30
[camera][iOS] app crashes with `Check failed: task_runners_.GetPlatformTaskRunner()->RunsTasksOnCurrentThread(). Process 521 stopped * thread #4, queue = 'io.flutter.camera.dispatchqueue'` when using startImageStream on master channel 17 2021-12-06 2022-11-25