Sebastian Markbåge 118ad2afa7 Validate DOM nesting for hydration before the hydration warns / errors (#28434) ...

If there's invalid dom nesting, there will be mismatches following but
the nesting is the most important cause of the problem.

Previously we would include the DOM nesting when rerendering thanks to
the new model of throw and recovery. However, the log would come during
the recovery phase which is after we've already logged that there was a
hydration mismatch.

People would consistently miss this log. Which is fair because you
should always look at the first log first as the most probable cause.

This ensures that we log in the hydration phase if there's a dom nesting
issue. This assumes that the consequence of nesting will appear such
that the won't have a mismatch before this. That's typically the case
because the node will move up and to be a later sibling. So as long as
that happens and we keep hydrating depth first, it should hold true.
There might be an issue if there's a suspense boundary between the nodes
we'll find discover the new child in the outer path since suspense
boundaries as breadth first.

Before:

<img width="996" alt="Screenshot 2024-02-23 at 7 34 01 PM"
src="https://github.com/facebook/react/assets/63648/af70cf7f-898b-477f-be39-13b01cfe585f">

After:

<img width="853" alt="Screenshot 2024-02-23 at 7 22 24 PM"
src="https://github.com/facebook/react/assets/63648/896c6348-1620-4f99-881d-b6069263925e">

Cameo: RSC stacks.

2024-02-24 00:45:42 -05:00

..

src

Validate DOM nesting for hydration before the hydration warns / errors (#28434)

2024-02-24 00:45:42 -05:00

package.json

Move react-dom implementation files to react-dom-bindings (#25345)

2022-09-28 19:05:50 -04:00