Maximum update depth exceeded due to Transition

[username14415]

I do not know why but in some cases I get Maximum update depth exceeded error due to Transition

import { Menu, MenuButton, MenuItems, MenuItem, MenuSection, MenuSeparator, Transition } from "@headlessui/react";
<Transition enter="dropdown-menu-enter transition ease-out duration-75" enterFrom="dropdown-menu-enterFrom" enterTo="dropdown-menu-enterTo" leave="dropdown-menu-leave" leaveFrom="dropdown-menu-leaveFrom" leaveTo="dropdown-menu-leaveTo">
...
</Transition>

I use the latest 2.2.0 react version
I've found similar issue: #3476 (comment)

[romaincapelle]

@username14415 I have had the same issue but for m1 mac user only. I delete all the transitions that were causing issue ( the one around Listbox ) I kept transition that were not causing an issue

[KeAnLL]

@username14415 I'm also having the similar issue. Takes some times to troubleshoot it.

For my case, I'm not using Transition component here in my Listbox component. However, I have the transition flag in the ListboxOptions which also cause the same issue you described here (see it in the attached screenshot). I disabled it by commenting it out.

Hope this helps you and other peers that are reading this thread.