Components: Fix the 'useUpdateEffect' hook in strict mode (WordPress#62974)

* Components: Fix the 'useUpdateEffect' hook in strict mode
* Add changelong entry

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: talldan <[email protected]>

Author: 3 people

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   `UnitControl`: Fix colors when disabled. ([#62970](https://github.com/WordPress/gutenberg/pull/62970))
+-   `useUpdateEffect`: Correctly track mounted state in strict mode. ([#62974](https://github.com/WordPress/gutenberg/pull/62974))
 
 ### Internal
 

packages/components/src/utils/hooks/use-update-effect.js

@@ -6,7 +6,7 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps
@@ -25,6 +25,13 @@ function useUpdateEffect( effect, deps ) {
 		// see https://github.com/WordPress/gutenberg/pull/41166
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
+
+	useEffect(
+		() => () => {
+			mounted.current = false;
+		},
+		[]
+	);
 }
 
 export default useUpdateEffect;