Fix hydration of components inside <Suspense>

[thecrypticace]

This is a redo of #2633 but with a more targeted fix for just React 18+

Previously, when dealing with SSR, we had a hook that would basically force a re-render of all components on page load. This also used some global state so we didn't unnecessarily cause re-renders for components that were mounting after the page had already loaded.

However, because <Suspense> delays hydration this is no longer a viable solution. I've implemented a targeted fix by (mis)using the useSyncExternalStore API. You can provide a getServerSnapshot callback that only runs on the server AND in the browser but only when hydrating. This gives us just enough info to know when hydration is happening.

I've slotted that into our useServerHandoffComplete() hook to handle the <Suspense> case. I'm also using wildcard imports, a "useSyncExternalStore" in React guard, and a lazy closure to ensure that bundlers don't statically analyze this in a way that errors for React < 18.

Fixes #2400

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2023 2:13pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2023 2:13pm

[RobinMalfait]

Apart from a few comments this is looking great.

Was testing it with the Dialogs and Transition components as well because we had some issues with those last time we were solving this. But this all seems to work as expected now.

Nice!