Widgets: Memoize 'getWidgets' store selector (#63338)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Jul 10, 2024 · acda158 · acda158
1 parent 73719c4
commit acda158
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -30,6 +30,8 @@ const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
+const EMPTY_ARRAY = [];
+
 export default function WidgetAreasBlockEditorProvider( {
 	blockEditorSettings,
 	children,
@@ -54,7 +56,7 @@ export default function WidgetAreasBlockEditorProvider( {
 			widgets: select( editWidgetsStore ).getWidgets(),
 			reusableBlocks: ALLOW_REUSABLE_BLOCKS
 				? getEntityRecords( 'postType', 'wp_block' )
-				: [],
+				: EMPTY_ARRAY,
 			isFixedToolbarActive: !! select( preferencesStore ).get(
 				'core/edit-widgets',
 				'fixedToolbar'

diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { getWidgetIdFromBlock } from '@wordpress/widgets';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -29,24 +29,35 @@ const EMPTY_INSERTION_POINT = {
  *
  * @return {Object[]} API List of widgets.
  */
-export const getWidgets = createRegistrySelector( ( select ) => () => {
-	const widgets = select( coreStore ).getEntityRecords(
-		'root',
-		'widget',
-		buildWidgetsQuery()
-	);
+export const getWidgets = createRegistrySelector( ( select ) =>
+	createSelector(
+		() => {
+			const widgets = select( coreStore ).getEntityRecords(
+				'root',
+				'widget',
+				buildWidgetsQuery()
+			);
 
-	return (
-		// Key widgets by their ID.
-		widgets?.reduce(
-			( allWidgets, widget ) => ( {
-				...allWidgets,
-				[ widget.id ]: widget,
-			} ),
-			{}
-		) || {}
-	);
-} );
+			return (
+				// Key widgets by their ID.
+				widgets?.reduce(
+					( allWidgets, widget ) => ( {
+						...allWidgets,
+						[ widget.id ]: widget,
+					} ),
+					{}
+				) ?? {}
+			);
+		},
+		() => [
+			select( coreStore ).getEntityRecords(
+				'root',
+				'widget',
+				buildWidgetsQuery()
+			),
+		]
+	)
+);
 
 /**
  * Returns API widget data for a particular widget ID.