Fix "This Suspense boundary received an update before it finished hydrating" error in the Disclosure component (#2238)

* use `startTransition` to work around `Suspense` boundary crash

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix SSR tab hydration when using Strict Mode in development ([#2231](https://github.com/tailwindlabs/headlessui/pull/2231))
 - Don't break overflow when multiple dialogs are open at the same time ([#2215](https://github.com/tailwindlabs/headlessui/pull/2215))
+- Fix "This `Suspense` boundary received an update before it finished hydrating" error in the `Disclosure` component ([#2238](https://github.com/tailwindlabs/headlessui/pull/2238))
 
 ## [1.7.8] - 2023-01-27
 

packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, useEffect, useRef } from 'react'
+import React, { createElement, Suspense, useEffect, useRef } from 'react'
 import { render } from '@testing-library/react'
 
 import { Disclosure } from './disclosure'
@@ -236,6 +236,19 @@ describe('Rendering', () => {
         assertActiveElement(getByText('restoreable'))
       })
     )
+
+    it('should not crash when using Suspense boundaries', async () => {
+      render(
+        <Disclosure defaultOpen={true}>
+          <Disclosure.Button>Click me!</Disclosure.Button>
+          <Disclosure.Panel>
+            <Suspense fallback={null}>
+              <p>Hi there</p>
+            </Suspense>
+          </Disclosure.Panel>
+        </Disclosure>
+      )
+    })
   })
 
   describe('Disclosure.Button', () => {

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -29,6 +29,7 @@ import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-cl
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { getOwnerDocument } from '../../utils/owner'
 import { useEvent } from '../../hooks/use-event'
+import { startTransition } from '../../utils/start-transition'
 
 enum DisclosureStates {
   Open,
@@ -361,7 +362,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
   let { close } = useDisclosureAPIContext('Disclosure.Panel')
 
   let panelRef = useSyncRefs(ref, state.panelRef, (el) => {
-    dispatch({ type: el ? ActionTypes.LinkPanel : ActionTypes.UnlinkPanel })
+    startTransition(() => dispatch({ type: el ? ActionTypes.LinkPanel : ActionTypes.UnlinkPanel }))
   })
 
   useEffect(() => {

packages/@headlessui-react/src/utils/start-transition.ts

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export let startTransition =
+  // Prefer React's `startTransition` if it's available.
+  // @ts-expect-error - `startTransition` doesn't exist in React < 18.
+  React.startTransition ??
+  function startTransition(cb: () => void) {
+    cb()
+  }