React 18 compatibility tracking issue

Update!

We’ve applied some fixes in #1326, if you are running into React 18 issues please install the insiders build to see if your issues go away:

• npm install @headlessui/react@insiders
• yarn add @headlessui/react@insiders.

If you are still running into React 18 related issues, please open a new issue with a reproduction repo attached so that we can tackle those issues as well.

---

What package within Headless UI are you using?

@headlessui/react

Describe your issue

Now that React 18 is out, it looks like some people are running into issues. This is because of StrictMode in React that does a few extra things to ensure that your library works with Suspense.

Currently it looks like all our components work fine with React 18, except for the Transition component. It just happens that a lot of people use this component in combination with other components like our Menu or Listbox components.

We are aware of the issues and are working on fixes.

In the meantime, if you need React 18 support, then you can temporarily disable StrictMode. If you are using something like Next.js, then you can disable it like this:

const nextConfig = {
  reactStrictMode: false,
  // ...
};

module.exports = nextConfig;

This workaround is a temporary solution so that you can move forward with your work. StrictMode is a development tool anyway and we are working hard to have compatibility with React 18 really soon.

Edited: 5th of April, 2022

[bigint]

It’s breaking again, react 18 is out now please make this issue a high priority one 🙏🏻

[bmichotte]

Now that React 18 is out, I think it’s time to bump this issue 😄