Optimize useSelect calls.

WordPress · Jun 24, 2020 · 0d461e1 · 0d461e1
1 parent 0f30b6f
commit 0d461e1
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 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
@@ -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-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
@@ -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
@@ -173,10 +173,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 (
 		<ColorGradientControlInner
 			{ ...{ ...colorGradientSettings, ...props } }

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -147,10 +147,13 @@ export const PanelColorGradientSettingsInner = ( {
 };
 
 const PanelColorGradientSettingsSelect = ( 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 (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -50,23 +50,26 @@ function UncontrolledInnerBlocks( props ) {
 
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 
-	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,
-		};
-	} );
+	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
@@ -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

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -45,16 +45,10 @@ function InserterMenu( {
 		isAppender,
 		selectBlockOnInsert: __experimentalSelectBlockOnInsert,
 	} );
-	const { hasPatterns } = useSelect(
-		( select ) => {
-			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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;