Performance: Try memoing large hotspots

packages/block-editor/src/components/block-breadcrumb/index.js

@@ -4,6 +4,7 @@
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -89,4 +90,9 @@ function BlockBreadcrumb( { rootLabelText } ) {
 	);
 }
 
-export default BlockBreadcrumb;
+/**
+ * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
+ *
+ * @return {WPElement} Block Breadcrumb.
+ */
+export default memo( BlockBreadcrumb );

packages/block-editor/src/components/block-list/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { createContext, useState, useMemo } from '@wordpress/element';
+import { createContext, useState, useMemo, memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -144,7 +144,7 @@ function Items( {
 	);
 }
 
-export function BlockListItems( props ) {
+function _BlockListItems( props ) {
 	// This component needs to always be synchronous as it's the one changing
 	// the async mode depending on the block selection.
 	return (
@@ -153,3 +153,5 @@ export function BlockListItems( props ) {
 		</AsyncModeProvider>
 	);
 }
+
+export const BlockListItems = memo( _BlockListItems );

packages/block-editor/src/components/block-switcher/index.js

@@ -21,6 +21,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { stack } from '@wordpress/icons';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -227,4 +228,4 @@ export const BlockSwitcher = ( { clientIds } ) => {
 	);
 };
 
-export default BlockSwitcher;
+export default memo( BlockSwitcher );

packages/block-editor/src/components/block-tools/block-popover.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useRef, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useCallback,
+	useRef,
+	useEffect,
+	memo,
+} from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -321,7 +327,7 @@ function wrapperSelector( select ) {
 	};
 }
 
-export default function WrappedBlockPopover( {
+function WrappedBlockPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
@@ -356,3 +362,5 @@ export default function WrappedBlockPopover( {
 		/>
 	);
 }
+
+export default memo( WrappedBlockPopover );

packages/edit-post/src/components/device-preview/index.js

@@ -7,13 +7,14 @@ import { external } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
-export default function DevicePreview() {
+export function DevicePreview() {
 	const {
 		hasActiveMetaboxes,
 		isPostSaveable,
@@ -62,3 +63,5 @@ export default function DevicePreview() {
 		</PreviewOptions>
 	);
 }
+
+export default memo( DevicePreview );

packages/edit-post/src/components/header/fullscreen-mode-close/index.js

@@ -13,6 +13,7 @@ import { addQueryArgs } from '@wordpress/url';
 import { wordpress } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -85,4 +86,4 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 	);
 }
 
-export default FullscreenModeClose;
+export default memo( FullscreenModeClose );

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -17,7 +17,7 @@ import {
 } from '@wordpress/editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
+import { useRef, useCallback, memo } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
@@ -170,4 +170,4 @@ function HeaderToolbar() {
 	);
 }
 
-export default HeaderToolbar;
+export default memo( HeaderToolbar );

packages/edit-post/src/components/header/more-menu/index.js

@@ -6,6 +6,7 @@ import { DropdownMenu, MenuGroup } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { ActionItem, PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -65,4 +66,4 @@ const MoreMenu = ( { showIconLabels } ) => {
 	);
 };
 
-export default MoreMenu;
+export default memo( MoreMenu );

packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MoreMenu should match snapshot 1`] = `
-<MoreMenu>
+<Memo(MoreMenu)>
   <DropdownMenu
     className="edit-post-more-menu"
     icon={
@@ -125,5 +125,5 @@ exports[`MoreMenu should match snapshot 1`] = `
       </div>
     </Dropdown>
   </DropdownMenu>
-</MoreMenu>
+</Memo(MoreMenu)>
 `;

packages/editor/src/components/post-saved-state/index.js

@@ -12,7 +12,7 @@ import {
 } from '@wordpress/components';
 import { usePrevious, useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, memo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, cloud, cloudUpload } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
@@ -35,7 +35,7 @@ import { store as editorStore } from '../../store';
  * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
  * @return {import('@wordpress/element').WPComponent} The component.
  */
-export default function PostSavedState( {
+export function PostSavedState( {
 	forceIsDirty,
 	forceIsSaving,
 	showIconLabels = false,
@@ -176,3 +176,4 @@ export default function PostSavedState( {
 		</Button>
 	);
 }
+export default memo( PostSavedState );

packages/editor/src/components/post-title/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState, memo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -28,7 +28,7 @@ import { store as editorStore } from '../../store';
  */
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
-export default function PostTitle() {
+function PostTitle() {
 	const instanceId = useInstanceId( PostTitle );
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
@@ -202,3 +202,4 @@ export default function PostTitle() {
 		</PostTypeSupportCheck>
 	);
 }
+export default memo( PostTitle );

packages/interface/src/components/complementary-area-toggle/index.js

@@ -8,6 +8,7 @@ import { omit } from 'lodash';
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -48,4 +49,4 @@ function ComplementaryAreaToggle( {
 	);
 }
 
-export default complementaryAreaContext( ComplementaryAreaToggle );
+export default memo( complementaryAreaContext( ComplementaryAreaToggle ) );