From 57e8b14c4a45846520090cf9f6f552ef8b798a09 Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Thu, 25 Jun 2020 09:27:28 -0500 Subject: [PATCH] Optimize useSelect calls. --- .../components/auto-block-uninstaller/index.js | 7 ++++--- .../index.js | 5 +++-- .../src/components/block-actions/index.js | 8 ++++---- .../block-list/block-contextual-toolbar.js | 2 +- .../src/components/block-list/block-html.js | 6 ++---- .../src/components/block-preview/index.js | 5 +++-- .../components/inner-blocks/index.native.js | 5 +++-- .../src/components/inserter/library.js | 18 +++++++++--------- 8 files changed, 29 insertions(+), 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 index c7e804f9f0923..12016417bc885 100644 --- 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 index c3c2ca5925933..59a69fa992fcf 100644 --- 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 index ef3518c0f2ef1..9f5e6593eb3e3 100644 --- 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 index 839cb84e87769..154a8f2e1f303 100644 --- 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 index b8f684b62f309..bce052f13e1ea 100644 --- 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 index bace284f9c8dc..5727d969f34f1 100644 --- 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 index 35665b155e5c3..e1a472b870f78 100644 --- 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 index e80c9c920c21e..d22966dff2f67 100644 --- 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 (