Fix useForceUpdate Memory Leak: Only setState if the component is still mounted

[mikejolley]

Description

Whilst working with Slot Fills, I found that when removing a component that renders a Slot Fill, a memory leak error is logged to the console:

Tracing it back, it seems to be occurring because useForceUpdate returns a setState method which can still be called after the component consuming it is unmounted. This can be fixed by checking if useForceUpdate is unmounted before calling setState.

gutenberg/packages/components/src/slot-fill/bubbles-virtually/fill.js

Lines 11 to 14 in 3da717b

	function useForceUpdate() {
	const [ , setState ] = useState( {} );
	return () => setState( {} );
	}

This only occurs if using Slot Fills with bubblesVirtually enabled.

This issue might be related to this note from @diegohaz #17355 (comment), however, in my testing, it only occurred with bubblesVirtually on, not off.

How has this been tested?

I tested this by applying the fix directly to the node_modules in WooCommerce Gutenberg Products Block plugin, where Slot Fills are imported. After applying the patch I could no longer reproduce the memory leak issue.

Note it can only be tested if:

• bubblesVirtually is on
• The Slot has fills (empty slots do not break)

It was logged here: woocommerce/woocommerce-blocks#4047

Types of changes

This is a bug fix within the components package, for Slot Fills.

Checklist:

• My code is tested.
• My code follows the WordPress code style.

[nerrad]

@diegohaz would you mind reviewing this given you've done some work in this area?

[diegohaz]

Looks good to me! There are some failing e2e tests, but I'm not sure they're related to this change. I did a rerun on them just in case.

I also believe this PR fixes #28478

[nerrad]

Thanks Mike 👍