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
*/
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 {
BlockInspector,
@ -75,7 +75,7 @@ function SidebarContent( props: Props ) {
);
}
export function Sidebar( props: Props ) {
function RawSidebar( props: Props ) {
const { toggleSettingsSidebarActiveTab } = useDispatch( storeName );
const { activeTab, selectedBlockId } = useSelect(
( select ) => ( {
@ -107,3 +107,5 @@ export function Sidebar( props: Props ) {
</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 {
__experimentalNavigatorProvider as NavigatorProvider, // eslint-disable-line
__experimentalNavigatorScreen as NavigatorScreen, // eslint-disable-line
@ -17,12 +18,13 @@ import {
type Props = ComponentProps< typeof ComplementaryArea >;
export function StylesSidebar( props: Props ): JSX.Element {
export function RawStylesSidebar( props: Props ): JSX.Element {
return (
<ComplementaryArea
identifier={ stylesSidebarId }
className="mailpoet-email-editor__styles-panel"
header={ __( 'Styles', 'mailpoet' ) }
closeLabel={ __( 'Close styles sidebar', 'mailpoet' ) }
icon={ styles }
scope={ storeName }
smallScreenTitle={ __( 'No title', 'mailpoet' ) }
@ -64,3 +66,5 @@ export function StylesSidebar( props: Props ): JSX.Element {
</ComplementaryArea>
);
}
export const StylesSidebar = memo( RawStylesSidebar );