Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Prevent unnecessary rerender of Sidebar and StylesSidebar components when the Layout component re-renders

Browse Source 
MAILPOET-6365
This commit is contained in:
Oluwaseun Olorunsola
2024-12-19 13:54:54 +01:00
committed by Oluwaseun Olorunsola
parent 9f65f04271
commit 8b9203fe09
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/js/email-editor/src/components/sidebar/sidebar.tsx
View File

@ -2,7 +2,7 @@
* WordPress dependencies * WordPress dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useContext, useRef, useEffect } from '@wordpress/element'; import { useContext, useRef, useEffect, memo } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { import {
BlockInspector, BlockInspector,
@ -75,7 +75,7 @@ function SidebarContent( props: Props ) {
); );
} }
export function Sidebar( props: Props ) { function RawSidebar( props: Props ) {
const { toggleSettingsSidebarActiveTab } = useDispatch( storeName ); const { toggleSettingsSidebarActiveTab } = useDispatch( storeName );
const { activeTab, selectedBlockId } = useSelect( const { activeTab, selectedBlockId } = useSelect(
( select ) => ( { ( select ) => ( {
@ -107,3 +107,5 @@ export function Sidebar( props: Props ) {
</Tabs> </Tabs>
); );
} }
export const Sidebar = memo( RawSidebar );

6
packages/js/email-editor/src/components/styles-sidebar/styles-sidebar.tsx
View File

@ -1,3 +1,4 @@
import { memo } from '@wordpress/element';
import { import {
__experimentalNavigatorProvider as NavigatorProvider, // eslint-disable-line __experimentalNavigatorProvider as NavigatorProvider, // eslint-disable-line
__experimentalNavigatorScreen as NavigatorScreen, // eslint-disable-line __experimentalNavigatorScreen as NavigatorScreen, // eslint-disable-line
@ -17,12 +18,13 @@ import {
type Props = ComponentProps< typeof ComplementaryArea >; type Props = ComponentProps< typeof ComplementaryArea >;
export function StylesSidebar( props: Props ): JSX.Element { export function RawStylesSidebar( props: Props ): JSX.Element {
return ( return (
<ComplementaryArea <ComplementaryArea
identifier={ stylesSidebarId } identifier={ stylesSidebarId }
className="mailpoet-email-editor__styles-panel" className="mailpoet-email-editor__styles-panel"
header={ __( 'Styles', 'mailpoet' ) } header={ __( 'Styles', 'mailpoet' ) }
closeLabel={ __( 'Close styles sidebar', 'mailpoet' ) }
icon={ styles } icon={ styles }
scope={ storeName } scope={ storeName }
smallScreenTitle={ __( 'No title', 'mailpoet' ) } smallScreenTitle={ __( 'No title', 'mailpoet' ) }
@ -64,3 +66,5 @@ export function StylesSidebar( props: Props ): JSX.Element {
</ComplementaryArea> </ComplementaryArea>
); );
} }
export const StylesSidebar = memo( RawStylesSidebar );