diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js index 1b93105a46f..607705a3c95 100644 --- a/plugins/woocommerce-admin/client/settings/index.js +++ b/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
Error getting data
; } - const { section } = getQuery(); const sections = settingsData[ params.page ]?.sections; const contentData = Array.isArray( sections ) && sections.length === 0 diff --git a/plugins/woocommerce-admin/client/settings/settings-slots.js b/plugins/woocommerce-admin/client/settings/settings-slots.js index 548f5f9dc6d..ddb05feebd5 100644 --- a/plugins/woocommerce-admin/client/settings/settings-slots.js +++ b/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 ] ) { - roots[ slot.id ].render( slotFill ); - } else { - const root = createRoot( slotDomElement ); - root.render( slotFill ); - roots[ slot.id ] = root; - } + const root = createRoot( slotDomElement ); + root.render( slotFill ); } else { render( <>