Hydration broken with React v16.10.0

[Ephem]

After preparing a merge and release for v16.10.0 I discovered a problem during testing, namely that hydration is broken when using Lightyear.

React v16.10.0 has ongoing work for Partial hydration which v16.9.0 did not have. From what I can tell the behaviour when React encounters a <Suspense> boundary during hydration has changed.

Error is: "Expected to have a hydrated suspense instance." which comes from prepareToHydrateHostSuspenseInstance.

Sadly, I don't think this can be fixed properly in Lightyear itself (but I'm 100% sure yet), in that case I see two possible ways forward (neither of which are verified to work):

• Needing to use a custom-built react-dom together with Lightyear, with the enableSuspenseServerRenderer feature flag turned on (and/or some other tweak)
• App code only rendering <Suspense> on the server, outputting a fragment on the client. This could be changed back to a <Suspense>-component after hydration.

[Ephem]

This change in React was not technically a breaking change since it changed something that wasn't part of the public API. Because this changed behaviour had such high impact however, for example on Next.js-apps, this was fixed in #16943 and released as React v16.10.1.

This means Lightyear should keep working without workarounds for now. Note that this isn't the final semantics that React will use, so this problem could/will be reintroduced in some form at some point.

I will verify that everything works as expected with v16.10.1 and if so add some documentation about React v16.10.0 being broken with Lightyear and then make a release tomorrow.

[Ephem]

Additional info:

• Issue #16938 in React describes this well
• PR #16945 is the one that will break this again, and notes an interesting workaround when that happens

[Ephem]

I've verified two things today:

• Everything works as before with React 16.10.1
• The "broken" version 16.10.0 did work when:
  • I built React from src with the feature flag enableSuspenseServerRenderer set to true
  • I used a concurrent root, that is, instead of ReactDOM.hydrate I used ReactDOM.unstable_createRoot(domNode, { hydrate: true }).render(<App />)

Long story short, React doesn't officially support hydrating <Suspense>-nodes yet since they aren't officially supported on the server. When support does come, it will require concurrent mode. That said, for now it will keep on working as before with Lightyear.

I've made a v16.10.0 release of Lightyear and I'm closing this issue, for now.