From 8d35521cff363aed911b041332472e3978915a7c Mon Sep 17 00:00:00 2001 From: Zebulan Stanphill Date: Fri, 19 Jun 2020 09:10:54 -0500 Subject: [PATCH] Optimize useSelect calls. --- .../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 +-- .../block-list/block-selection-button.js | 14 +++---- .../src/components/block-preview/index.js | 5 ++- .../components/colors-gradients/control.js | 11 ++++-- .../panel-color-gradient-settings.js | 11 ++++-- .../src/components/inner-blocks/index.js | 37 ++++++++++--------- .../components/inner-blocks/index.native.js | 5 ++- .../src/components/inserter/library.js | 18 ++++----- .../src/components/inserter/menu.js | 14 ++----- .../src/components/link-control/index.js | 7 +--- .../src/components/observe-typing/index.js | 5 ++- .../page-template-picker/picker.native.js | 8 ++-- .../page-template-picker/preview.native.js | 2 +- .../use-page-template-picker.native.js | 25 ++++++++----- .../src/components/rich-text/index.js | 7 +++- .../components/spacing-panel-control/index.js | 2 +- 20 files changed, 105 insertions(+), 94 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 249dd6e2e8a82..8cc484a92b67d 100644 --- a/packages/block-editor/src/components/block-actions/index.js +++ b/packages/block-editor/src/components/block-actions/index.js @@ -21,10 +21,10 @@ export default function BlockActions( { clientIds, children } ) { 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-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index aabcaac918e29..737d6b3e72899 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -31,21 +31,21 @@ function BlockSelectionButton( { moverDirection, ...props } ) { - const selected = useSelect( + const { index, name, attributes } = useSelect( ( select ) => { const { __unstableGetBlockWithoutInnerBlocks, getBlockIndex, } = select( 'core/block-editor' ); - const index = getBlockIndex( clientId, rootClientId ); - const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( - clientId - ); - return { index, name, attributes }; + const block = __unstableGetBlockWithoutInnerBlocks( clientId ); + return { + index: getBlockIndex( clientId, rootClientId ), + name: block.name, + attributes: block.attributes, + }; }, [ clientId, rootClientId ] ); - const { index, name, attributes } = selected; const { setNavigationMode, removeBlock } = 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/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 1d167f4b77f3d..c9861947e1660 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -175,10 +175,13 @@ function ColorGradientControlInner( { } function ColorGradientControlSelect( props ) { - const colorGradientSettings = useSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); - return pick( settings, colorsAndGradientKeys ); - } ); + const colorGradientSettings = useSelect( + ( select ) => { + const settings = select( 'core/block-editor' ).getSettings(); + return pick( settings, colorsAndGradientKeys ); + }, + [ colorsAndGradientKeys ] + ); return ( { - const colorGradientSettings = useSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); - return pick( settings, colorsAndGradientKeys ); - } ); + const colorGradientSettings = useSelect( + ( select ) => { + const settings = select( 'core/block-editor' ).getSettings(); + return pick( settings, colorsAndGradientKeys ); + }, + [ colorsAndGradientKeys ] + ); return ( { - const { - getBlock, - isBlockSelected, - hasSelectedInnerBlock, - isNavigationMode, - } = select( 'core/block-editor' ); - const theBlock = getBlock( clientId ); - return { - block: theBlock, - hasOverlay: - theBlock.name !== 'core/template' && - ! isBlockSelected( clientId ) && - ! hasSelectedInnerBlock( clientId, true ), - enableClickThrough: isNavigationMode() || isSmallScreen, - }; - } ); + const { hasOverlay, block, enableClickThrough } = useSelect( + ( select ) => { + const { + getBlock, + isBlockSelected, + hasSelectedInnerBlock, + isNavigationMode, + } = select( 'core/block-editor' ); + const theBlock = getBlock( clientId ); + return { + block: theBlock, + hasOverlay: + theBlock.name !== 'core/template' && + ! isBlockSelected( clientId ) && + ! hasSelectedInnerBlock( clientId, true ), + enableClickThrough: isNavigationMode() || isSmallScreen, + }; + }, + [ clientId, isSmallScreen ] + ); useNestedSettingsUpdate( clientId, 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 a5e7094f54d4a..8ea31ade53f65 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -21,16 +21,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 ( { - const { getSettings } = select( 'core/block-editor' ); - return { - hasPatterns: !! getSettings().__experimentalBlockPatterns - ?.length, - }; - }, - [ isAppender, clientId, rootClientId ] - ); + const hasPatterns = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return !! getSettings().__experimentalBlockPatterns?.length; + }, [] ); const showPatterns = ! destinationRootClientId && hasPatterns; const onKeyDown = ( event ) => { diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index bdf9112ef0153..b91d8166b211d 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -183,12 +183,9 @@ function LinkControl( { const [ errorMessage, setErrorMessage ] = useState( null ); const isEndingEditWithFocus = useRef( false ); - const { fetchSearchSuggestions } = useSelect( ( select ) => { + const fetchSearchSuggestions = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); - return { - fetchSearchSuggestions: getSettings() - .__experimentalFetchLinkSuggestions, - }; + return getSettings().__experimentalFetchLinkSuggestions; }, [] ); const displayURL = ( value && filterURLForDisplay( safeDecodeURI( value.url ) ) ) || ''; diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js index 6e50f1360672b..f9d4c2789b3f2 100644 --- a/packages/block-editor/src/components/observe-typing/index.js +++ b/packages/block-editor/src/components/observe-typing/index.js @@ -45,8 +45,9 @@ function isKeyDownEligibleForStartTyping( event ) { function ObserveTyping( { children, setTimeout: setSafeTimeout } ) { const typingContainer = useRef(); const lastMouseMove = useRef(); - const isTyping = useSelect( ( select ) => - select( 'core/block-editor' ).isTyping() + const isTyping = useSelect( + ( select ) => select( 'core/block-editor' ).isTyping(), + [] ); const { startTyping, stopTyping } = useDispatch( 'core/block-editor' ); useEffect( () => { diff --git a/packages/block-editor/src/components/page-template-picker/picker.native.js b/packages/block-editor/src/components/page-template-picker/picker.native.js index b6193b4bc1471..637e84c0d2472 100644 --- a/packages/block-editor/src/components/page-template-picker/picker.native.js +++ b/packages/block-editor/src/components/page-template-picker/picker.native.js @@ -36,13 +36,11 @@ const __experimentalPageTemplatePicker = ( { visible, } ) => { const { editPost } = useDispatch( 'core/editor' ); - const { title } = useSelect( ( select ) => { + const title = useSelect( ( select ) => { const { getEditedPostAttribute } = select( 'core/editor' ); - return { - title: getEditedPostAttribute( 'title' ), - }; - } ); + return getEditedPostAttribute( 'title' ); + }, [] ); const [ templatePreview, setTemplatePreview ] = useState(); const [ pickerVisible, setPickerVisible ] = useState( visible ); diff --git a/packages/block-editor/src/components/page-template-picker/preview.native.js b/packages/block-editor/src/components/page-template-picker/preview.native.js index 68a6fe983f5be..fbcc9ff7be6ea 100644 --- a/packages/block-editor/src/components/page-template-picker/preview.native.js +++ b/packages/block-editor/src/components/page-template-picker/preview.native.js @@ -28,7 +28,7 @@ import styles from './styles.scss'; const BlockPreview = ( { blocks } ) => { const currentSettings = useSelect( ( select ) => { return select( 'core/block-editor' ).getSettings(); - } ); + }, [] ); const settings = { ...currentSettings, readOnly: true, diff --git a/packages/block-editor/src/components/page-template-picker/use-page-template-picker.native.js b/packages/block-editor/src/components/page-template-picker/use-page-template-picker.native.js index 53b173324ad69..ef0b9351e44e0 100644 --- a/packages/block-editor/src/components/page-template-picker/use-page-template-picker.native.js +++ b/packages/block-editor/src/components/page-template-picker/use-page-template-picker.native.js @@ -14,16 +14,21 @@ export const __experimentalUsePageTemplatePickerAvailable = () => { export const __experimentalUsePageTemplatePickerVisible = () => { const isTemplatePickerAvailable = __experimentalUsePageTemplatePickerAvailable(); - return useSelect( ( select ) => { - const { getBlockOrder, getBlock } = select( 'core/block-editor' ); + return useSelect( + ( select ) => { + const { getBlockOrder, getBlock } = select( 'core/block-editor' ); - const blocks = getBlockOrder(); - const isEmptyBlockList = blocks.length === 0; - const firstBlock = ! isEmptyBlockList && getBlock( blocks[ 0 ] ); - const isOnlyUnmodifiedDefault = - blocks.length === 1 && isUnmodifiedDefaultBlock( firstBlock ); - const isEmptyContent = isEmptyBlockList || isOnlyUnmodifiedDefault; + const blocks = getBlockOrder(); + const isEmptyBlockList = blocks.length === 0; + const firstBlock = ! isEmptyBlockList && getBlock( blocks[ 0 ] ); - return isEmptyContent && isTemplatePickerAvailable; - }, [] ); + const isOnlyUnmodifiedDefault = + blocks.length === 1 && isUnmodifiedDefaultBlock( firstBlock ); + + const isEmptyContent = isEmptyBlockList || isOnlyUnmodifiedDefault; + + return isEmptyContent && isTemplatePickerAvailable; + }, + [ isTemplatePickerAvailable ] + ); }; diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 639c4e4a191d9..75bf15d79f975 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -206,7 +206,12 @@ function RichTextWrapper( disabled, undo, shouldBlurOnUnmount, - } = useSelect( selector ); + } = useSelect( selector, [ + clientId, + identifier, + isUnmodifiedDefaultBlock, + originalIsSelected, + ] ); const { __unstableMarkLastChangeAsPersistent, enterFormattedText, diff --git a/packages/block-editor/src/components/spacing-panel-control/index.js b/packages/block-editor/src/components/spacing-panel-control/index.js index 866e31e0ed9fd..972c80deadd16 100644 --- a/packages/block-editor/src/components/spacing-panel-control/index.js +++ b/packages/block-editor/src/components/spacing-panel-control/index.js @@ -19,7 +19,7 @@ export default function SpacingPanelControl( { children, ...props } ) { const isSpacingEnabled = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); return get( getSettings(), '__experimentalEnableCustomSpacing' ); - } ); + }, [] ); if ( ! isSpacingEnabled ) return null;