Disclosure component bug: This Suspense boundary received an update before it finished hydrating

[migueloller]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.8

What browser are you using?

Chrome

Reproduction URL

https://github.com/migueloller/headless-ui-disclosure-suspense-repro

Describe your issue

Using a Disclosure component with defaultOpen set to true with a Suspense boundary on the panel will result in the following error:

[migueloller]

Note that this error only happens on a hard-reload (it's happening during hydration) when defaultOpen is set to true or if defaultOpen is set to false, you can set static to true in Disclosure.Panel. There seems to be a state change in the Disclosure component that happens before React has finished hydrating. Possibly because the component does the state change during render instead of in an effect?

As the error message mentions, perhaps this state changed should be wrapped in startTransition?

Related:

• Remove recoverable error when a sync update flows into a dehydrated boundary facebook/react#25692
• https://twitter.com/sebmarkbage/status/1592654900953219074?s=20

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is indeed an odd/annoying bug. That said this should be fixed by #2238, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[raphaelreimann]

Hey @RobinMalfait, I was running into a similar problem with the Tabs component but upgrading to the insiders version solved it. Thanks so much 🙂