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(
<>