Skip to content

Commit f90c21d

Browse files
committed
use native useId hook from React 18
1 parent ae50f30 commit f90c21d

File tree

1 file changed

+2
-24
lines changed
  • packages/@headlessui-react/src/hooks

1 file changed

+2
-24
lines changed
Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,2 @@
1-
import React from 'react'
2-
import { env } from '../utils/env'
3-
import { useIsoMorphicEffect } from './use-iso-morphic-effect'
4-
import { useServerHandoffComplete } from './use-server-handoff-complete'
5-
6-
// We used a "simple" approach first which worked for SSR and rehydration on the client. However we
7-
// didn't take care of the Suspense case. To fix this we used the approach the @reach-ui/auto-id
8-
// uses.
9-
//
10-
// Credits: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
11-
12-
export let useId =
13-
// Prefer React's `useId` if it's available.
14-
React.useId ??
15-
function useId() {
16-
let ready = useServerHandoffComplete()
17-
let [id, setId] = React.useState(ready ? () => env.nextId() : null)
18-
19-
useIsoMorphicEffect(() => {
20-
if (id === null) setId(env.nextId())
21-
}, [id])
22-
23-
return id != null ? '' + id : undefined
24-
}
1+
// Re-exporting the useId hook such that we can easily mock this hook in tests.
2+
export { useId } from 'react'

0 commit comments

Comments
 (0)