finally get slotFill right

plugins/woocommerce-admin/client/settings/index.js

@@ -18,11 +18,12 @@ import './style.scss';
 
 const Settings = ( { params } ) => {
 	const settingsData = window.wcSettings?.admin?.settingsPages;
+	const { section } = getQuery();
 
 	// Be sure to render Settings slots when the params change.
 	useEffect( () => {
 		possiblyRenderSettingsSlots();
-	}, [ params ] );
+	}, [ params.page, section ] );
 
 	// Register the slot fills for the settings page just once.
 	useEffect( () => {
@@ -35,7 +36,6 @@ const Settings = ( { params } ) => {
 		return <div>Error getting data</div>;
 	}
 
-	const { section } = getQuery();
 	const sections = settingsData[ params.page ]?.sections;
 	const contentData =
 		Array.isArray( sections ) && sections.length === 0

plugins/woocommerce-admin/client/settings/settings-slots.js

@@ -10,8 +10,6 @@ export const SETTINGS_SLOT_FILL_CONSTANT =
 
 const { Slot } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
 
-const roots = {};
-
 export const possiblyRenderSettingsSlots = () => {
 	const slots = [
 		{
@@ -43,13 +41,8 @@ export const possiblyRenderSettingsSlots = () => {
 		);
 
 		if ( createRoot ) {
-			if ( roots[ slot.id ] ) {
+			const root = createRoot( slotDomElement );
-				roots[ slot.id ].render( slotFill );
+			root.render( slotFill );
-			} else {
-				const root = createRoot( slotDomElement );
-				root.render( slotFill );
-				roots[ slot.id ] = root;
-			}
 		} else {
 			render(
 				<>