You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey! Thank you for your bug report!
Much appreciated! 🙏
As far as I can tell, this is not really a bug, but a side effect due to StrictMode. The fixes applied in #1183 were an issue due to SSR and that issue got fixed.
The reason the callback is being called in Vite & React 18 is because StrictMode is enabled, which will mount/unmount your component twice in development to prepare yourself for ConcurrentMode. You will notice that in the blog post they mention this:
* React mounts the component.
* Layout effects are created.
* Effect effects are created.
* React simulates effects being destroyed on a mounted component.
* Layout effects are destroyed.
* Effects are destroyed.
* React simulates effects being re-created on a mounted component.
* Layout effects are created
* Effect setup code runs
You can also test that yourself by providing this useEffect:
The reason this works in Vite + React 17 is because React 17 doesn't have this StrictMode behaviour. The reason this works in Next.js & React 18 is because StrictMode is not enabled in that CodeSandbox.
You can easily test this by adding a console.log in the render function:
You will notice that in Vite & React 18 you will get 2 logs for Render, but in the others you will only get 1, indicating that StrictMode is not running.
While this is a bit annoying in development, I hope this makes sense since we are following the rules of not making assumptions and doing the proper execution of effects & cleanup.
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
@headlessui/react
: v1.6.0react
: 18.1.0What browser are you using?
Chrome
Reproduction URL
Open codesandbox and click button, see the console log...
Next.js & React 18: https://codesandbox.io/s/nextjs-headlessui-transition-beforeenter-bug-7zhcs4?file=/pages/index.js
Vite & React 17: https://codesandbox.io/s/vite-react17-headlessui-transition-beforeenter-bug-4k4qg3?file=/src/App.jsx
Vite & React 18: https://codesandbox.io/s/vite-react18-headlessui-transition-beforeenter-bug-488324?file=/src/App.jsx
Describe your issue
Call
beforeEnter
twice by<Transition>
on React 18 & Vite.I've seen the issue #311 and a PR #1183 resolved it, but @headlessui/react v1.6.0 still has this bug... 😅
The text was updated successfully, but these errors were encountered: