Optimize useSelect calls. (#23255)

WordPress · Jun 26, 2020 · 153817e · 153817e
1 parent 76ef596
commit 153817e
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 27 deletions.
diff --git a/packages/block-directory/src/components/auto-block-uninstaller/index.js b/packages/block-directory/src/components/auto-block-uninstaller/index.js
@@ -11,10 +11,11 @@ export default function AutoBlockUninstaller() {
 	const shouldRemoveBlockTypes = useSelect( ( select ) => {
 		const { isAutosavingPost, isSavingPost } = select( 'core/editor' );
 		return isSavingPost() && ! isAutosavingPost();
-	} );
+	}, [] );
 
-	const unusedBlockTypes = useSelect( ( select ) =>
-		select( 'core/block-directory' ).getUnusedBlockTypes()
+	const unusedBlockTypes = useSelect(
+		( select ) => select( 'core/block-directory' ).getUnusedBlockTypes(),
+		[]
 	);
 
 	useEffect( () => {

diff --git a/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js
@@ -11,8 +11,9 @@ import { useSelect } from '@wordpress/data';
 import CompactList from '../../components/compact-list';
 
 export default function InstalledBlocksPrePublishPanel() {
-	const newBlockTypes = useSelect( ( select ) =>
-		select( 'core/block-directory' ).getNewBlockTypes()
+	const newBlockTypes = useSelect(
+		( select ) => select( 'core/block-directory' ).getNewBlockTypes(),
+		[]
 	);
 
 	if ( ! newBlockTypes.length ) {

diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -25,10 +25,10 @@ export default function BlockActions( {
 		getBlocksByClientId,
 		getTemplateLock,
 	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
-	const {
-		getDefaultBlockName,
-		getGroupingBlockName,
-	} = useSelect( ( select ) => select( 'core/blocks' ) );
+	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
+		( select ) => select( 'core/blocks' ),
+		[]
+	);
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );

diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js
@@ -24,7 +24,7 @@ function BlockContextualToolbar( { focusOnMount, ...props } ) {
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
 		};
-	} );
+	}, [] );
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
 			return null;

diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js
@@ -18,10 +18,8 @@ import {
 
 function BlockHTML( { clientId } ) {
 	const [ html, setHtml ] = useState( '' );
-	const { block } = useSelect(
-		( select ) => ( {
-			block: select( 'core/block-editor' ).getBlock( clientId ),
-		} ),
+	const block = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlock( clientId ),
 		[ clientId ]
 	);
 	const { updateBlock } = useDispatch( 'core/block-editor' );

diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
@@ -23,8 +23,9 @@ export function BlockPreview( {
 	__experimentalLive = false,
 	__experimentalOnClick,
 } ) {
-	const settings = useSelect( ( select ) =>
-		select( 'core/block-editor' ).getSettings()
+	const settings = useSelect(
+		( select ) => select( 'core/block-editor' ).getSettings(),
+		[]
 	);
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	if ( ! blocks || blocks.length === 0 ) {

diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -50,8 +50,9 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 	} = props;
 
-	const block = useSelect( ( select ) =>
-		select( 'core/block-editor' ).getBlock( clientId )
+	const block = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlock( clientId ),
+		[ clientId ]
 	) || { innerBlocks: [] };
 
 	useNestedSettingsUpdate( clientId, allowedBlocks, templateLock );

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
@@ -22,16 +22,16 @@ function InserterLibrary( {
 	__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 	onSelect = noop,
 } ) {
-	const { destinationRootClientId } = useSelect( ( select ) => {
-		const { getBlockRootClientId } = select( 'core/block-editor' );
+	const destinationRootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( 'core/block-editor' );
 
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		return {
-			rootClientId,
-		};
-	} );
+			return (
+				rootClientId || getBlockRootClientId( clientId ) || undefined
+			);
+		},
+		[ clientId, rootClientId ]
+	);
 
 	return (
 		<InserterMenu