React Internals Deep Dive 29 - How hydration works with Suspense internally in React?

The hydration for Suspense is also convoluted, allow me to summarize it as below.

Suspense is serialized by comment node with $ meaning non-suspended, and $! as suspended.
- Hydration for Suspense is 2-pass process in order to put it into lower priority.
- During hydration
1. if pre-existing DOM is fallback, then it’ll be discarded and client-side rendering will generate the new DOM, either fallback or contents
2. if pre-exisiting DOM is contents, but client-side suspends. We want to switch the contents directly without fallback in the middle, so fallback won’t be displayed.
3. if pre-existing DOM is contents and also is the client-side, then hydration continues to the children of Suspense.

Hi I'm a JavaScript engineer who is not good at algorithms, If you are interested, maybe we can learn together.