refactor: useEffectEvent for efficient deps

[justinpark]

SUMMARY

We often to update(add) the useEffect dependencies to fix the dependency warnings (i.e. #22974)
This work has potential performance degrade issue.

For example, #22974 updated the following useEffect dependancies.

superset/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

Lines 382 to 397 in 097f475

	useEffect(() => {
	// We need to measure the height of the sql editor post render to figure the height of
	// the south pane so it gets rendered properly
	setHeight(getSqlEditorHeight());
	if (!database || isEmpty(database)) {
	setShowEmptyState(true);
	}
	window.addEventListener('resize', handleWindowResizeWithThrottle);
	window.addEventListener('beforeunload', onBeforeUnload);
	return () => {
	window.removeEventListener('resize', handleWindowResizeWithThrottle);
	window.removeEventListener('beforeunload', onBeforeUnload);
	};
	}, [database, handleWindowResizeWithThrottle, onBeforeUnload]);

This means setHeight and window event allocation can be triggered anytime handleWindowResizeWithThrottle/onBeforeUnload or/and updated.

The problem is onBeforeUnload also has dependancies by useCallback

superset/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

Lines 365 to 380 in 097f475

	const onBeforeUnload = useCallback(
	event => {
	if (
	database?.extra_json?.cancel_query_on_windows_unload &&
	latestQuery?.state === 'running'
	) {
	event.preventDefault();
	stopQuery();
	}
	},
	[
	database?.extra_json?.cancel_query_on_windows_unload,
	latestQuery?.state,
	stopQuery,
	],
	);

So whenever database is updated or latestQuery state updated, the above useEffect triggers the additional setHeight(which triggers re-rendering) and new event allocation (no memory leaked but unnecessary addEventListener/removeEventListener operation triggered)

This is common issue on react useEffect usage, so there's an official solution (useEffectEvent) is introduced.
For more detail, please check the blog link /w video clip or official proposal document

FYI: currently eslint rule of exhaustive-deps related to useEffectEvent is under experimental, this commit uses use-event-callback to avoid the warning

In addition to introduce the useEffectEvent, this commit also tune up L365-L380 to avoid the unnecessary setHeight triggered during database is updated.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N/A

TESTING INSTRUCTIONS

Resize sqllab editor to verify the query panel height adjusted accordingly.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #23871 (bd6ac8a) into master (594d3e0) will decrease coverage by 0.03%.
The diff coverage is 66.66%.

❗ Current head bd6ac8a differs from pull request most recent head 668d4e5. Consider uploading reports for the commit 668d4e5 to get more accurate results

@@            Coverage Diff             @@
##           master   #23871      +/-   ##
==========================================
- Coverage   68.11%   68.08%   -0.03%     
==========================================
  Files        1938     1941       +3     
  Lines       74972    75020      +48     
  Branches     8141     8154      +13     
==========================================
+ Hits        51067    51079      +12     
- Misses      21826    21858      +32     
- Partials     2079     2083       +4     

Flag	Coverage Δ
javascript	54.46% <48.00%> (-0.02%)	⬇️
mysql	?

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...s/legacy-plugin-chart-calendar/src/controlPanel.ts	50.00% <ø> (ø)
...rts/src/BigNumber/BigNumberTotal/transformProps.ts	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	0.00% <0.00%> (ø)
...set-frontend/src/components/Select/AsyncSelect.tsx	88.46% <ø> (ø)
superset-frontend/src/components/Select/Select.tsx	90.41% <ø> (ø)
...onalFormattingControl/FormattingPopoverContent.tsx	51.35% <ø> (ø)
superset-frontend/src/preamble.ts	0.00% <0.00%> (ø)
superset-frontend/src/setup/setupFormatters.ts	0.00% <ø> (ø)
superset-frontend/src/types/bootstrapTypes.ts	100.00% <ø> (ø)
superset/cli/native_filters.py	0.00% <ø> (ø)
... and 16 more

... and 6 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[michael-s-molina]

Suggested change

	setHeight(getSqlEditorHeight());
	setHeight(height);

[justinpark]

In this approach, this doesn't need to wrap with useEffectEvent since no references needed other than setHeight.
Let me clean up with setHeight then.

[michael-s-molina]

Oh, that's right. I didn't notice it was a useState 👍🏼

[michael-s-molina]

You should pass the height to the effect event. Check the Notes here.

Suggested change

	const handleWindowResize = useEffectEvent(() => {
	const handleWindowResize = useEffectEvent(height => {

[justinpark]

removed handleWindowResize since no longer needed

[michael-s-molina]

This will be indeed a nice addition to React. Looking forward to it.

[michael-s-molina]

LGTM