Headless UI transitions and dialog not working on react 18

[lveillard]

Hello all!
Just FYI, headlessUI transitions and dialogs don't work with react 18 beta:

"@headlessui/react": "^1.4.2",
"next": "^12.0.2",
"next-seo": "^4.28.1",
"react": "^18.0.0-rc.0-next-ceee524a8-20211217",
"react-dom": "^18.0.0-rc.0-next-ceee524a8-20211217",

A quick way to check it.

1. clone
   https://github.com/ixartz/Next-js-Boilerplate

2. yarn add @headlessui/react@next

3. Add this somewhere in the index

  const [isShowing, setIsShowing] = useState(false)
 ....

        <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
          Toggle
        </button>

        <Transition show={isShowing}>I will appear and disappear.</Transition>

4. Test the toggle => it works
5. update to react 18 beta => yarn add react-dom@next; yarn add react@next
6. Now toggle does not work

[salazarm]

Can you create a codesandbox to make it easier to check?

[lveillard]

It works in codesandbox with react 18 so it might be something in the boilerplate i've shared with you
https://codesandbox.io/s/winter-waterfall-qmxf7?file=/pages/index.js

[tothandras]

It seems to be working in a production build, but not in development with next.js. With a more in-depth knowledge it might be an easy fix, but I'm not familiar with the headless UI codebase. Let me know if I can help in any way.

[patrykmaron]

@lveillard any way you have fixed this? I am having the same issue

[lamdinh95]

@lveillard It not works when Concurrent Mode is enabled which using ReactDOM.createRoot(rootNode).render(<App />);.

[lveillard]

Still broken but it does work in production btw

[jikbaria]

It's broken in development because of Strict Effects mode:
"React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components"

[RobinMalfait]

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

We haven't worked on React 18 support yet since this also introduces breaking changes. Will close this in favor of a tracking issue for React 18: #681

[byamasu-patrick]

Try to disable strict mode, I had the same issue too. But I resolved it by disabling the react strict mode

[lveillard]

Feel free to test the insiders version also which works already with react strict set to true.
@headlessui/react@insiders
One thing you will notice is this version also has comboboxes with multiple values ;)