Block Directory: Memoize store selectors (WordPress#63346)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
carstingaxion · Jul 18, 2024 · 768db44 · 768db44
1 parent 2a48c6e
commit 768db44
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
@@ -53,15 +53,21 @@ export function getInstalledBlockTypes( state ) {
  *
  * @return {Array} Block type items.
  */
-export const getNewBlockTypes = createRegistrySelector(
-	( select ) => ( state ) => {
-		const usedBlockTree = select( blockEditorStore ).getBlocks();
-		const installedBlockTypes = getInstalledBlockTypes( state );
+export const getNewBlockTypes = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			const usedBlockTree = select( blockEditorStore ).getBlocks();
+			const installedBlockTypes = getInstalledBlockTypes( state );
 
-		return installedBlockTypes.filter( ( blockType ) =>
-			hasBlockType( blockType, usedBlockTree )
-		);
-	}
+			return installedBlockTypes.filter( ( blockType ) =>
+				hasBlockType( blockType, usedBlockTree )
+			);
+		},
+		( state ) => [
+			getInstalledBlockTypes( state ),
+			select( blockEditorStore ).getBlocks(),
+		]
+	)
 );
 
 /**
@@ -72,15 +78,21 @@ export const getNewBlockTypes = createRegistrySelector(
  *
  * @return {Array} Block type items.
  */
-export const getUnusedBlockTypes = createRegistrySelector(
-	( select ) => ( state ) => {
-		const usedBlockTree = select( blockEditorStore ).getBlocks();
-		const installedBlockTypes = getInstalledBlockTypes( state );
+export const getUnusedBlockTypes = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			const usedBlockTree = select( blockEditorStore ).getBlocks();
+			const installedBlockTypes = getInstalledBlockTypes( state );
 
-		return installedBlockTypes.filter(
-			( blockType ) => ! hasBlockType( blockType, usedBlockTree )
-		);
-	}
+			return installedBlockTypes.filter(
+				( blockType ) => ! hasBlockType( blockType, usedBlockTree )
+			);
+		},
+		( state ) => [
+			getInstalledBlockTypes( state ),
+			select( blockEditorStore ).getBlocks(),
+		]
+	)
 );
 
 /**