diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index bc88e370ce4a1d..617fdc368768d6 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/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 ); diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 46e5d56f9f0317..bfd690ca4287b1 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/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 ) { ); } + +export const BlockListItems = memo( _BlockListItems ); diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 7c580817f8370f..146f2d0dfe8e56 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/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 ); diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js index 8371cfff9bbba8..2fc7552f64c2d5 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/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 ); diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js index f1744e86e242ba..78d1cf8a7e13b6 100644 --- a/packages/edit-post/src/components/device-preview/index.js +++ b/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() { ); } + +export default memo( DevicePreview ); diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js index 5f63c8108af579..a3d6bc0cc86d6f 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/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 ); diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index f3e16a6f2b398d..5ca8a079da8046 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/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 ); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index 17b763b26f3749..c6e0d16aafbc56 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/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 ); diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap index 9ffdb5a699ff04..6ae50b8c62bc0f 100644 --- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap +++ b/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`] = ` - + - + `; diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js index a6e2bca9e5bbbe..7d58a69cc92148 100644 --- a/packages/editor/src/components/post-saved-state/index.js +++ b/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( { ); } +export default memo( PostSavedState ); diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 374af843f8a3f4..e2121fc01fd0c3 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/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() { ); } +export default memo( PostTitle ); diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index a4ba7e095d43b2..32dae4a61991fa 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/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 ) );