PRESS 2 498 | Audit memoization candidates

src/OnboardingSPA/components/CardHeader/index.js

@@ -6,21 +6,32 @@
  * @return CardHeader
  */
 
-import React from 'react';
-
-const CardHeader = ({ heading, subHeading, question }) => {
+import { memo } from '@wordpress/element';
 
+const CardHeader = ( { heading, subHeading, question } ) => {
 	return (
 		<div>
-			{heading && <h2 className="nfd-step-card-heading">{heading}</h2>}
+			{ heading && (
+				<h2 className="nfd-step-card-heading">{ heading }</h2>
+			) }
 
-			{subHeading && (
-				<h3 className={ question ? "nfd-step-card-subheading-other" : "nfd-step-card-subheading" }>{subHeading}</h3>
-			)}
+			{ subHeading && (
+				<h3
+					className={
+						question
+							? 'nfd-step-card-subheading-other'
+							: 'nfd-step-card-subheading'
+					}
+				>
+					{ subHeading }
+				</h3>
+			) }
 
-			{question && <h3 className="nfd-step-card-question">{question}</h3>}
+			{ question && (
+				<h3 className="nfd-step-card-question">{ question }</h3>
+			) }
 		</div>
 	);
 };
 
-export default CardHeader;
+export default memo( CardHeader );

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js

@@ -6,7 +6,6 @@ import { Popover, ColorPicker } from '@wordpress/components';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import { GlobalStylesProvider } from '../../LivePreview';
 import Animate from '../../Animate';
 
 const DesignColors = () => {
@@ -96,7 +95,7 @@ const DesignColors = () => {
 						const slug = selectedThemeColorPalette[ idx ]?.slug;
 						if (
 							isCustomStyle &&
-							selectedColorsLocalTemp?.[ slug ] != ''
+							selectedColorsLocalTemp?.[ slug ] !== ''
 						)
 							selectedThemeColorPalette[ idx ].color =
 								selectedColorsLocalTemp[ slug ];
@@ -142,31 +141,31 @@ const DesignColors = () => {
 				switch ( selectedThemeColorPalette[ idx ]?.slug ) {
 					case 'base':
 						if (
-							colorPickerCalledBy == 'base' &&
+							colorPickerCalledBy === 'base' &&
 							customColors?.base
 						)
 							selectedThemeColorPalette[ idx ].color =
 								customColors?.base;
 						break;
 					case 'primary':
 						if (
-							colorPickerCalledBy == 'primary' &&
+							colorPickerCalledBy === 'primary' &&
 							customColors?.primary
 						)
 							selectedThemeColorPalette[ idx ].color =
 								customColors?.primary;
 						break;
 					case 'secondary':
 						if (
-							colorPickerCalledBy == 'secondary' &&
+							colorPickerCalledBy === 'secondary' &&
 							customColors?.secondary
 						)
 							selectedThemeColorPalette[ idx ].color =
 								customColors?.secondary;
 						break;
 					case 'tertiary':
 						if (
-							colorPickerCalledBy == 'tertiary' &&
+							colorPickerCalledBy === 'tertiary' &&
 							customColors?.tertiary
 						)
 							selectedThemeColorPalette[ idx ].color =
@@ -278,7 +277,7 @@ const DesignColors = () => {
 				<div
 					key={ colorStyle }
 					className={ `color-palette ${
-						colorStyle == selectedColors?.slug
+						colorStyle === selectedColors?.slug
 							? 'color-palette-selected'
 							: ''
 					} ` }
@@ -317,15 +316,15 @@ const DesignColors = () => {
 
 	function buildCustomPalette() {
 		const primaryColorTemp =
-			customColors && customColors?.primary != ''
+			customColors && customColors?.primary !== ''
 				? customColors?.primary
 				: selectedColorsLocal?.primary ?? '#fff';
 		const secondaryColorTemp =
-			customColors && customColors?.secondary != ''
+			customColors && customColors?.secondary !== ''
 				? customColors?.secondary
 				: selectedColorsLocal?.secondary ?? '#fff';
 		const tertiaryColorTemp =
-			customColors && customColors?.tertiary != ''
+			customColors && customColors?.tertiary !== ''
 				? customColors?.tertiary
 				: selectedColorsLocal?.tertiary ?? '#fff';
 
@@ -455,18 +454,16 @@ const DesignColors = () => {
 	}
 
 	return (
-		<GlobalStylesProvider>
-			<div className="theme-colors--drawer">
-				<h2>{ __( 'Color Palettes', 'wp-module-onboarding' ) }</h2>
-				{ /* {selectedColors?.slug && 
-					<div className='theme-colors--drawer--reset' onClick={resetColors}>
-						<div>Reset Button</div>
-					</div>
-				} */ }
-				{ colorPalettes && buildPalettes() }
-				{ colorPalettes && buildCustomPalette() }
-			</div>
-		</GlobalStylesProvider>
+		<div className="theme-colors--drawer">
+			<h2>{ __( 'Color Palettes', 'wp-module-onboarding' ) }</h2>
+			{ /* {selectedColors?.slug && 
+				<div className='theme-colors--drawer--reset' onClick={resetColors}>
+					<div>Reset Button</div>
+				</div>
+			} */ }
+			{ colorPalettes && buildPalettes() }
+			{ colorPalettes && buildCustomPalette() }
+		</div>
 	);
 };
 

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js

@@ -3,7 +3,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { GlobalStylesProvider } from '../../../components/LivePreview';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
@@ -131,11 +130,13 @@ const DesignTypography = () => {
 		const paletteRenderedList = [];
 		for ( const fontStyle in fontPalettes ) {
 			const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 );
-			if ( splitLabel.length == 0 ) continue;
+			if ( splitLabel.length === 0 ) continue;
 			paletteRenderedList.push(
 				<div
 					className={ `font-palette ${
-						selectedFont == fontStyle ? 'font-palette-selected' : ''
+						selectedFont === fontStyle
+							? 'font-palette-selected'
+							: ''
 					} ` }
 					onClick={ ( e ) => handleClick( fontStyle ) }
 				>
@@ -202,19 +203,17 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<GlobalStylesProvider>
-			<div ref={ drawerFontOptions } className="theme-fonts--drawer">
-				<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
-				{ /* { selectedFont && 
-				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
-					<div>Reset Button</div>
-				</div>
-			} */ }
-				{ fontPalettes && buildPalettes() }
-				{ /* { fontPalettes && buildCustomPalette() } */ }
-				<div className="custom-font-palette--hidden">{ rerender }</div>
+		<div ref={ drawerFontOptions } className="theme-fonts--drawer">
+			<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
+			{ /* { selectedFont && 
+			<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
+				<div>Reset Button</div>
 			</div>
-		</GlobalStylesProvider>
+		} */ }
+			{ fontPalettes && buildPalettes() }
+			{ /* { fontPalettes && buildCustomPalette() } */ }
+			<div className="custom-font-palette--hidden">{ rerender }</div>
+		</div>
 	);
 };
 export default DesignTypography;

src/OnboardingSPA/components/ImageUploader/index.js

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n'; 
-import { useRef, useState } from '@wordpress/element';
+import { memo, useRef, useState } from '@wordpress/element';
 
 import { ImageUploadLoader } from '../Loaders';
 import { uploadImage } from '../../utils/api/uploader';
@@ -104,4 +104,4 @@ const ImageUploader = ({ icon, iconSetter }) => {
     );
 };
 
-export default ImageUploader;
+export default memo(ImageUploader);

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, memo } from '@wordpress/element';
 
 import AutoHeightBlockPreview from './auto';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -76,21 +76,25 @@ const BlockPreview = ( {
 		}
 	}, [ storedPreviewSettings ] );
 
+	const SkeletonLivePreview = memo( () => {
+		return (
+			<div className="live-preview__container--is-skeleton">
+				<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-header">
+					<Animate
+						type={ 'shine' }
+						className="live-preview__container--is-skeleton--shimmer"
+					></Animate>
+				</div>
+				<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-1" />
+				<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-2" />
+				<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-footer" />
+			</div>
+		);
+	} );
+
 	return (
 		<div className={ `live-preview__container-${ styling }` }>
-			{ loading && (
-				<div className="live-preview__container--is-skeleton">
-					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-header">
-						<Animate
-							type={ 'shine' }
-							className="live-preview__container--is-skeleton--shimmer"
-						></Animate>
-					</div>
-					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-1" />
-					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-body-2" />
-					<div className="live-preview__container--is-skeleton--box live-preview__container--is-skeleton--box-footer" />
-				</div>
-			) }
+			{ loading && <SkeletonLivePreview /> }
 			{ settings && (
 				<BlockEditorProvider
 					value={ blocks }

src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js

@@ -2,6 +2,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
+import { THEME_STATUS_NOT_ACTIVE } from '../../../../constants';
 import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 
@@ -29,20 +30,22 @@ const GlobalStylesProvider = ( { children } ) => {
 		useDispatch( nfdOnboardingStore );
 
 	const getStylesAndPatterns = async () => {
-		const globalStyles = await getGlobalStyles();
-		if ( globalStyles?.error ) {
-			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
-		}
 		let selectedGlobalStyle;
 		if ( storedPreviewSettings?.title && storedPreviewSettings?.settings )
 			selectedGlobalStyle = storedPreviewSettings;
-		else if ( currentData.data.theme.variation ) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				( globalStyle ) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[ 0 ];
-		} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
-			selectedGlobalStyle = globalStyles.body[ 0 ];
+		else {
+			const globalStyles = await getGlobalStyles();
+			if ( globalStyles?.error ) {
+				return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
+			}
+			if ( currentData.data.theme.variation ) {
+				selectedGlobalStyle = globalStyles.body.filter(
+					( globalStyle ) =>
+						globalStyle.title === currentData.data.theme.variation
+				)[ 0 ];
+			} else if ( globalStyles.body[ 0 ]?.id === 0 ) {
+				selectedGlobalStyle = globalStyles.body[ 0 ];
+			}
 		}
 
 		if ( selectedGlobalStyle )

src/OnboardingSPA/components/MiniPreview/index.js

@@ -1,5 +1,5 @@
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { memo, useState, useEffect } from '@wordpress/element';
 
 import content from './miniPreview.json';
 import { translations } from '../../utils/locales/translations';
@@ -159,4 +159,4 @@ const MiniPreview = ({ title, desc, icon, socialData, isSocialFormOpen, setIsSoc
     );
 };
 
-export default MiniPreview;
+export default memo(MiniPreview);