[Bug]: Tab Component, Hydration error on React 18

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.60

What browser are you using?

Safari

Reproduction URL

https://codesandbox.io/s/cool-yonath-qeouqc?file=/pages/index.js

Describe your issue

Error: Hydration failed because the initial UI does not match what was rendered on the server. error message when using the headlessui Tab component.

[lgraubner]

The latest release does fix it, indeed. Thanks!

[MTaghinia]

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

I don’t know if there is much we can do here. We are using React 18’s useId hook, and the produced IDs are different on the server compared to the client. In the console you also have this warning:

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Fixing that might probably solve the issue.

Here is an example of our playground where we don’t have hydration issues and this behaviour works as expected: https://headlessui-react-fglvz9cc1-tailwindlabs.vercel.app/tabs/tabs-with-pure-tailwind

The provided example also has this problem and it shows the hydration error in the console. There is a problem with id created with useId hook which cause hydration error with nextjs and react 18.