search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Use `useId` instead of React internals #3254

Closed eps1lon closed 4 months ago

eps1lon commented 4 months ago

These may break in any React release which may result in blocking the ecosystem from seemlessly upgrading to new React releases.

We can use useId instead which is available since React 18.

Keep in mind that the whole hook is not safe in concurrent rendering. It increments render during render but only decrements in an effect cleanup. React may render multiple times before actually committing. The keys would leak in those scenarios (e.g. when a sibling suspends).

Closes https://github.com/tailwindlabs/headlessui/issues/3167

vercel[bot] commented 4 months ago

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 May 29, 2024 1:45pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 29, 2024 1:45pm
RobinMalfait commented 4 months ago

Hey!

Thanks for the PR, I did inline the useId hook directly but apart from that everything looks good to me. Thanks!