Bug: Hundreds render of Suspense child with hydration error about react

[eps1lon]

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.

We retry client components one more time with sync rendering to check if we can recover.

[eps1lon]

If wrapped in Suspese component cause hydration error, React will render this component hungreds or event thousands times.

This is intended behavior. React will re-render on hydration mismatches inside Suspense in an attempt to recover. This should not break any app behavior. Though the number here is quite high. What are the steps to repro this behavior in the repo you linked?

The second case is violating the Rules of React. Class component constructors must be pure i.e. calling setTimeout in them is not allowed and leads to undefined behavior.

[SuperOleg39]

This is intended behavior. React will re-render on hydration mismatches inside Suspense in an attempt to recover. This should not break any app behavior. Though the number here is quite high.

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.

What are the steps to repro this behavior in the repo you linked?

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

1. Clone repo https://github.com/SuperOleg39/react-ssr-perf-test
2. Switch to branch react-bug-suspense-child
3. Remove this component from App render
4. Run application build and server - cd react-18-stream && yarn && yarn start (use Node.js 16)
5. Open application page at http://localhost:4000
6. Reload page with React Proiler recording

[SuperOleg39]

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.

[SuperOleg39]

Hello, @eps1lon!

Do I need to send a more information about reproduction steps, or it is enough?