Bug: Suspense fallback is not interactive

[artem-malko]

A component inside <Suspense /> can not have it's own interactive state while renderToPipeableStream. I have a not little (sorry) demo with renderToPipeableStream and react-query — https://github.com/artem-malko/react-ssr-template And I faced with a quite strange behavior, when fallback component in <Suspense /> can not use onClick with useState while server rendering.

React version: 18.2.0

Steps To Reproduce

There is the demo: http://174.138.13.187:5000/news?p=1

1. Open the URL
2. Try to click on "increase n" button
3. A state inside <DefaultLoading /> is not working while render on a server is not over.

Link to code example:

There is a source code for a link above https://github.com/artem-malko/react-ssr-template/blob/main/src/application/shared/lib/query/reactQueryBoundary.tsx#L29

As you can see, there is a boundary for react-query (useSuspenseQuery). So, Suspense uses DefaultLoading in a case of news list (https://github.com/artem-malko/react-ssr-template/blob/main/src/application/features/newsList/index.tsx#L77)

The current behavior

Described in steps for reproduce

The expected behavior

I thought, that fallback component should work while renderToPipeableStream rendering. Looks like I have only its html, but not hydrated fallback. After server is done, my button inside <DefaultLoading /> is ok.

By the way, there is no anything about it in the docs. I've just found only that (https://react.dev/reference/react/Suspense#suspense):

fallback: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[artem-malko]

Em, guys, it is still an issue! I'm not alone with a such problem: https://github.com/SAP/ui5-webcomponents-react/issues/5386

I'm pretty sure, there are some problems with fallback for Suspense in a hydration process

[eps1lon]

I'll take a look what's wrong here

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!