NXT-8994: Adapted Enact code to respect React Compiler

[ion-andrusciac-lgp]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

Adapted Enact code to respect React Compiler

Resolution

eslint-plugin-react-hooks 7.x has React Compiler embedded. The code needs to be adapted to respect Eslint rules

• Adapted how the refs were changed during render, and also cannot read .current during render. This is not allowed outside handlers or effects REFERENCE
• Modifying a variable defined outside a component or hook is not allowed
• Modifying component props or hook arguments is not allowed
• State update inside useEffect is not recommended

Additional Considerations

Some of the errors were silenced as they were considered false positives

Links

NXT-8994

Comments

Enact-DCO-1.0-Signed-off-by: Ion Andrusciac ion.andrusciac@lgepartner.com

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.07%. Comparing base (f1a8e88) to head (5f46520).

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #3379      +/-   ##
===========================================
+ Coverage    83.24%   86.07%   +2.82%     
===========================================
  Files          154      136      -18     
  Lines         7258     5551    -1707     
  Branches      1919     1439     -480     
===========================================
- Hits          6042     4778    -1264     
+ Misses         956      610     -346     
+ Partials       260      163      -97     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[daniel-stoian-lgp]

this causes an additional rerender on every parentVariants change. When parentVariants changes, the first render uses the old currentParentVariants, then setState triggers a second render with the new value

How about just dropping useMemo() ? Let me know your opinion.

"const effectiveVariants = determineVariants(defaultVariants, variants, skinVariants, parentVariants);"

[daniel-stoian-lgp]

i see an issue of potential inifnite loops because of setState on render.

How about using the derivedStateFromProps pattern?

Suggested change

	setInstance({selected: propSelected});
	const [derivedState, setDerivedState] = useState(() => ({
	prevPropSelected: null,
	selected: hook.selected
	}));
	if (propSelected !== derivedState.prevPropSelected) {
	const newSelected = (derivedState.prevPropSelected && propSelected == null) ? false : hook.selected;
	setDerivedState({
	prevPropSelected: propSelected,
	selected: newSelected
	});
	}
	const selected = derivedState.selected;