NXT-8994: Adapted Enact code to respect React Compiler

packages/core/useClass/useClass.js

@@ -1,4 +1,4 @@
-import {useRef} from 'react';
+import {useState} from 'react';
 
 /**
  * Creates one instance of the class, `Ctor` with the provided `args`, for the life of the
@@ -29,10 +29,9 @@ import {useRef} from 'react';
  * @private
  */
 function useClass (Ctor, ...args) {
-	const ref = useRef(null);
-	ref.current = ref.current || new Ctor(...args);
+	const [state] = useState(() => new Ctor(...args));
 
-	return ref.current;
+	return state;
 }
 
 export default useClass;

packages/core/useHandlers/tests/useHandlers-specs.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import {render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import useHandlers from '../useHandlers';
 
@@ -17,9 +18,11 @@ describe('useHandlers', () => {
 			}
 		}, props, context);
 
-		data = {
-			handlers
-		};
+		useEffect(() => {
+			data = {
+				handlers
+			};
+		}, [handlers]);
 
 		return (
 			<div {...props} data-testid="divComponent" />

packages/core/util/util.js

@@ -14,11 +14,12 @@
  * @exports perfNow
  * @exports mapAndFilterChildren
  * @exports shallowEqual
+ * @exports usePrevious
  */
 import always from 'ramda/src/always';
 import isType from 'ramda/src/is';
 import unless from 'ramda/src/unless';
-import {Children} from 'react';
+import {Children, useState} from 'react';
 import * as ReactIs from 'react-is';
 
 import Job from './Job';
@@ -329,6 +330,28 @@ const shallowEqual = (a, b) => {
 	return true;
 };
 
+/**
+ * A custom hook that returns the previous value of a variable.
+ *
+ * @function
+ * @param   {*}    value    The value to track.
+ *
+ * @returns {*}             The value from the previous render.
+ * @memberof core/util
+ * @public
+ */
+const usePrevious = (value) => {
+	const [previousTrackedValue, setPreviousTrackedValue] = useState(value);
+	const [previousValue, setPreviousValue] = useState(value);
+
+	if (value !== previousTrackedValue) {
+		setPreviousTrackedValue(value);
+		setPreviousValue(previousTrackedValue);
+	}
+
+	return previousValue;
+};
+
 export {
 	cap,
 	clamp,
@@ -342,5 +365,6 @@ export {
 	perfNow,
 	mapAndFilterChildren,
 	setDefaultProps,
-	shallowEqual
+	shallowEqual,
+	usePrevious
 };

packages/sampler/stories/default/Routable.js

@@ -45,7 +45,6 @@ const HomeView = () => (
 	<Heading style={viewStyle}>/app/home</Heading>
 );
 
-const SettingModuleComponents = {};
 // eslint-disable-next-line enact/display-name
 const SettingModuleView = (settingModuleName) => () => (
 	<div style={viewStyle}>
@@ -65,6 +64,7 @@ export default {
 };
 
 export const Routable_ = () => {
+	const SettingModuleComponents = {};
 	let [path, setPath] = useState('/app');
 	const handleNavigate = (ev) => {
 		action('onNavigate')(ev);

packages/spotlight/Spottable/Spottable.js

@@ -145,10 +145,10 @@ const Spottable = hoc(defaultConfig, (config, Wrapped) => {
 		}
 		rest.tabIndex = tabIndex;
 
-		const handlers = useHandlers(spotHandlers, rest, spot);
-
 		delete rest.spotlightId;
 
+		const handlers = useHandlers(spotHandlers, rest, spot);
+
 		return (
 			<WrappedWithRef
 				{...rest}

packages/spotlight/Spottable/useSpottable.js

@@ -1,5 +1,5 @@
 import useClass from '@enact/core/useClass';
-import {useLayoutEffect, useRef} from 'react';
+import {useLayoutEffect, useState} from 'react';
 
 import {SpottableCore, spottableClass} from './SpottableCore';
 
@@ -56,22 +56,24 @@ const REMOTE_OK_KEY = 16777221;
 
 const useSpottable = ({emulateMouse, getSpotRef, selectionKeys = [ENTER_KEY, REMOTE_OK_KEY], spotlightDisabled, ...props} = {}) => {
 	const hook = useClass(SpottableCore, {emulateMouse});
-	const context = useRef({
+	const [context, setContext] = useState({
 		prevSpotlightDisabled: spotlightDisabled,
 		spotlightDisabled
 	});
 
-	context.current = {
-		prevSpotlightDisabled: context.current.spotlightDisabled,
-		spotlightDisabled
-	};
-
 	let attributes = {};
 	if (props.spotlightId) {
 		attributes['data-spotlight-id'] = props.spotlightId;
 	}
 
-	hook.setPropsAndContext({selectionKeys, spotlightDisabled, ...props}, context.current);
+	if (context.spotlightDisabled !== spotlightDisabled) {
+		setContext({
+			prevSpotlightDisabled: context.spotlightDisabled,
+			spotlightDisabled
+		});
+	}
+
+	hook.setPropsAndContext({selectionKeys, spotlightDisabled, ...props}, context);
 
 	useLayoutEffect(() => {
 		hook.load(getSpotRef() || null);

packages/ui/AnnounceDecorator/tests/AnnounceDecorator-specs.js

@@ -1,4 +1,5 @@
 import {render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import AnnounceDecorator from '../AnnounceDecorator';
 
@@ -7,7 +8,9 @@ describe('AnnounceDecorator', () => {
 
 	// no-op wrapper
 	const Div = (props) => {
-		announceProps = props;
+		useEffect(() => {
+			announceProps = props;
+		}, [props]);
 
 		return <div />;
 	};

packages/ui/AnnounceDecorator/tests/useAnnounce-specs.js

@@ -1,12 +1,16 @@
 import {render, screen} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import useAnnounce from '../useAnnounce';
 
 describe('useAnnounce', () => {
 	let announceType;
 
 	function Base ({children, announce}) {
-		announceType = typeof announce;
+		useEffect(() => {
+			announceType = typeof announce;
+		}, [announce]);
+
 		return <div data-testid="announce">{children}</div>;
 	}
 

packages/ui/Changeable/tests/Changeable-specs.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import {act, render, screen} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import Changeable from '../Changeable';
 
@@ -8,7 +9,10 @@ describe('Changeable', () => {
 	const testValue = 3;
 
 	const DivComponent = (props) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
+
 		return <div data-testid="changeable">{props.value?.toString()}</div>;
 	};
 

packages/ui/Measurable/tests/Measurable-specs.js

@@ -1,13 +1,18 @@
 import {act, render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import Measurable, {useMeasurable} from '../Measurable';
 
 let data;
 
 const DivComponent = (props) => {
-	data = props;
+	const {controlsRef} = props;
 
-	return <div ref={props.controlsRef} />;
+	useEffect(() => {
+		data = props;
+	}, [props]);
+
+	return <div ref={controlsRef} />;
 };
 
 const MeasurableComponent = Measurable({refProp: 'controlsRef', measurementProp: 'controlsMeasurements'}, DivComponent);

packages/ui/Placeholder/tests/PlaceholderControllerDecorator-specs.js

@@ -1,13 +1,16 @@
 import '@testing-library/jest-dom';
 import {render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import {PlaceholderControllerDecorator} from '../../Placeholder';
 
 describe('PlaceholderControllerDecorator', () => {
 	let data;
 
 	const DivComponent = (props) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
 
 		return <div data-testid="component" {...props} />;
 	};

packages/ui/Resizable/tests/Resizable-specs.js

@@ -1,13 +1,16 @@
 import Registry from '@enact/core/internal/Registry';
 import {render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import Resizable, {ResizeContext} from '../Resizable';
 
 describe('Resizable', () => {
 	let data;
 
 	const DivComponent = (props) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
 
 		return <div data-testid="component" />;
 	};

packages/ui/Resizable/tests/useResize-specs.js

@@ -1,5 +1,6 @@
 import Registry from '@enact/core/internal/Registry';
 import {render} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import {ResizeContext} from '../Resizable';
 import useResize from '../useResize';
@@ -8,7 +9,9 @@ describe('useResize', () => {
 	let data;
 
 	const DivComponent = (props) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
 
 		return <div data-testid="component" />;
 	};

packages/ui/Skinnable/tests/Skinnable-specs.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import {render, screen} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import Skinnable from '../Skinnable';
 
@@ -9,7 +10,10 @@ describe('Skinnable Specs', () => {
 		let data;
 
 		const Component = (props) => {
-			data = props;
+			useEffect(() => {
+				data = props;
+			}, [props]);
+
 			return <div {...props} />;
 		};
 
@@ -77,7 +81,10 @@ describe('Skinnable Specs', () => {
 		let data;
 
 		const Component = (props) => {
-			data = props;
+			useEffect(() => {
+				data = props;
+			}, [props]);
+
 			return <div {...props} />;
 		};
 

packages/ui/Skinnable/useSkins.js

@@ -1,4 +1,4 @@
-import {createContext, use, useCallback, useMemo} from 'react';
+import {createContext, use, useCallback, useMemo, useState} from 'react';
 
 import {determineSkin, determineVariants, getClassName} from './util';
 
@@ -84,8 +84,10 @@ function useSkins (config) {
 
 	const {parentSkin, parentVariants} = use(SkinContext) || {};
 
+	const currentParentVariants = useMemo(() => parentVariants, [parentVariants]);
+
 	const effectiveSkin = determineSkin(defaultSkin, skin, parentSkin);
-	const effectiveVariants = useMemo(() => determineVariants(defaultVariants, variants, skinVariants, parentVariants), [defaultVariants, variants, skinVariants, parentVariants]);
+	const effectiveVariants = useMemo(() => determineVariants(defaultVariants, variants, skinVariants, currentParentVariants), [currentParentVariants, parentVariants, skinVariants, variants]);
 	const className = getClassName(skins, effectiveSkin, effectiveVariants);
 	const value = useMemo(() => ({parentSkin: effectiveSkin, parentVariants: effectiveVariants}), [effectiveSkin, effectiveVariants]);
 

packages/ui/Toggleable/Toggleable.js

@@ -180,8 +180,8 @@ const ToggleableHOC = hoc(defaultConfig, (config, Wrapped) => {
 		// either null or undefined. The ternary below enforces that but we don't want to
 		// continue this exception in the future and should sunset it with this HOC.
 		const {current: instance} = useRef({selected: null});
-		const selected = (instance.selected && propSelected == null) ? false : hook.selected;
-		instance.selected = propSelected;
+		const selected = (instance.selected && propSelected == null) ? false : hook.selected; // eslint-disable-line react-hooks/refs
+		instance.selected = propSelected; // eslint-disable-line react-hooks/refs
 
 		if (prop) {
 			updated[prop] = selected;

packages/ui/Toggleable/tests/Toggleable-specs.js

@@ -1,13 +1,17 @@
 import '@testing-library/jest-dom';
 import {act, render, screen} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import Toggleable from '../Toggleable';
 
 describe('Toggleable', () => {
 	let data;
 
 	const DivComponent = (props) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
+
 		return <div data-testid="selected-state">{props.selected?.toString()}</div>;
 	};
 

packages/ui/Touchable/tests/Touchable-specs.js

@@ -1,4 +1,5 @@
 import {act, createEvent, fireEvent, render, screen} from '@testing-library/react';
+import {useEffect} from 'react';
 
 import {configure, getConfig, resetDefaultConfig} from '../config';
 import Touchable from '../Touchable';
@@ -14,7 +15,10 @@ describe('Touchable', () => {
 	let data;
 
 	const DivComponent = ({children = 'Toggle', id, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseUp, onTouchStart, onTouchEnd, ...props}) => {
-		data = props;
+		useEffect(() => {
+			data = props;
+		}, [props]);
+
 		return (
 			<div
 				data-testid="component"