Bug: hydration mismatch in top component does not cause client-render fallback

[alatielle]

We render some markup on the server, but on the client (due to the bug in our app's code) we have a different state and we render nothing (instead of our markup).

In this case React should fallback to client render, so it is expected that the server-rendered markup is removed, but it's not.

Notice, how the server-rendered placeholders are still visible though the console.log inside the component states that the visible state is false:

The problem exists only if this branch happens to be at the very top of the components tree. React doesn't even see the mismatch.

React version: 18.2.0

Steps To Reproduce

1. render some markup on the server
2. on client side render it as null

Link to code example:

https://stackblitz.com/edit/react-kpphvo?file=src/App.js

The current behavior

Mismatch is ignored, client's render result is not applied

The expected behavior

Fallback to client's render result, mismatch warning is reported, server rendered markup is removed

[Enrique-Ambrocio]

Hi there! Is this issue still currently open? I'd be more than happy to take a look.

[alatielle]

Hi! Still reproducible on 18.2.0

[igorkamyshev]

Any news? 🥹