-
Notifications
You must be signed in to change notification settings - Fork 46.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Hundreds render of Suspense child with hydration error #29922
Comments
This is intended behavior. React will re-render on hydration mismatches inside The second case is violating the Rules of React. Class component constructors must be pure i.e. calling |
As I know React will render suspensed child multiple times when need to wait thrown promise to be resolved? Interesting why this behaviour is applied to recoverable errors, I expected a failed client component to be called only once, then client error can be propagated to Error Boundary parent.
The same steps from issue, but this line with class component need to be removed - https://github.com/SuperOleg39/react-ssr-perf-test/blob/react-bug-suspense-child/react-18-stream/src/App.js#L52C12-L52C27
|
One more thing, @eps1lon, important thing in reproduction branch - a big React component inside Suspense boundaries. Looks like this problem occurs only when selective hydration applied to component, and it will render in concurrent mode. For small components React did hydration fast, and probably sync. |
We retry client components one more time with sync rendering to check if we can recover. |
Hello, @eps1lon! Just want to remind about this issue, sorry for bothering you. |
Hello, @eps1lon, want to remind about this issue. |
React version: 18.2
Description
Hello!
Found a few problem cases with Suspense, one quite exotic, one easy to reproduce, and in our project I get both at the same time.
First case - hundreds render of Suspense child with hydration error.
If wrapped in Suspese component cause hydration error, React will render this component hungreds or event thousands times.
Example:
Second case - Looped render of class component with
setState
in constructor wrapped in SuspenseOf course,
setState
in counstructor sounds like a bad pattern, but we have it in some big legacy class component.Example:
Bingo case - Both of previous examples in same component are guaranteed to cause a loop
profiling-data.18.06.2024.12-28-19.json.zip
Steps To Reproduce
https://github.com/SuperOleg39/react-ssr-perf-test
react-bug-suspense-child
cd react-18-stream && yarn && yarn start
(use Node.js 16)http://localhost:4000
Link to code example:
SuperOleg39/react-ssr-perf-test#1
The current behavior
Components which are not really suspended, rendered multiple times, like React wait for promise to resolve.
Also looks like React treats this components both as one when check if they are suspended or not.
The expected behavior
Expect the same behaviour as without
Suspense
boundary.We use
Suspense
for our components mostly to prevent server rendering failure if one of this components failed.The text was updated successfully, but these errors were encountered: