Fix "Can't perform a React state update on an unmounted component." when using the Transition component (#2374)

* only change flags when mounted

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix focus styles showing up when using the mouse ([#2347](https://github.com/tailwindlabs/headlessui/pull/2347))
+- Fix "Can't perform a React state update on an unmounted component." when using the `Transition` component ([#2374](https://github.com/tailwindlabs/headlessui/pull/2374))
 
 ### Added
 

packages/@headlessui-react/src/hooks/use-flags.ts

@@ -1,12 +1,32 @@
 import { useState, useCallback } from 'react'
+import { useIsMounted } from './use-is-mounted'
 
 export function useFlags(initialFlags = 0) {
   let [flags, setFlags] = useState(initialFlags)
+  let mounted = useIsMounted()
 
-  let addFlag = useCallback((flag: number) => setFlags((flags) => flags | flag), [flags])
+  let addFlag = useCallback(
+    (flag: number) => {
+      if (!mounted.current) return
+      setFlags((flags) => flags | flag)
+    },
+    [flags, mounted]
+  )
   let hasFlag = useCallback((flag: number) => Boolean(flags & flag), [flags])
-  let removeFlag = useCallback((flag: number) => setFlags((flags) => flags & ~flag), [setFlags])
-  let toggleFlag = useCallback((flag: number) => setFlags((flags) => flags ^ flag), [setFlags])
+  let removeFlag = useCallback(
+    (flag: number) => {
+      if (!mounted.current) return
+      setFlags((flags) => flags & ~flag)
+    },
+    [setFlags, mounted]
+  )
+  let toggleFlag = useCallback(
+    (flag: number) => {
+      if (!mounted.current) return
+      setFlags((flags) => flags ^ flag)
+    },
+    [setFlags]
+  )
 
   return { flags, addFlag, hasFlag, removeFlag, toggleFlag }
 }