Use native useId and useSyncExternalStore hooks (#3092)

* use native `useSyncExternalStore` hook from React 18

* use native `useId` hook from React 18

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Attempt form submission when pressing `Enter` on the `<Listbox.Button />` component ([#2972](https://github.com/tailwindlabs/headlessui/pull/2972))
 - Make the `Combobox` component `nullable` by default ([#3064](https://github.com/tailwindlabs/headlessui/pull/3064))
 - Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089))
+- Use native `useId` and `useSyncExternalStore` hooks ([#3092](https://github.com/tailwindlabs/headlessui/pull/3092))
 
 ### Added
 

packages/@headlessui-react/src/hooks/use-id.ts

@@ -1,24 +1,2 @@
-import React from 'react'
-import { env } from '../utils/env'
-import { useIsoMorphicEffect } from './use-iso-morphic-effect'
-import { useServerHandoffComplete } from './use-server-handoff-complete'
-
-// We used a "simple" approach first which worked for SSR and rehydration on the client. However we
-// didn't take care of the Suspense case. To fix this we used the approach the @reach-ui/auto-id
-// uses.
-//
-// Credits: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
-
-export let useId =
-  // Prefer React's `useId` if it's available.
-  React.useId ??
-  function useId() {
-    let ready = useServerHandoffComplete()
-    let [id, setId] = React.useState(ready ? () => env.nextId() : null)
-
-    useIsoMorphicEffect(() => {
-      if (id === null) setId(env.nextId())
-    }, [id])
-
-    return id != null ? '' + id : undefined
-  }
+// Re-exporting the useId hook such that we can easily mock this hook in tests.
+export { useId } from 'react'

packages/@headlessui-react/src/hooks/use-store.ts

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from '../use-sync-external-store-shim/index'
+import { useSyncExternalStore } from 'react'
 import type { Store } from '../utils/store'
 
 export function useStore<T>(store: Store<T, any>) {