PRESS 2 498 | Audit memoization candidates

src/OnboardingSPA/components/CardHeader/index.js

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { memo } from '@wordpress/element'
 
 const CardHeader = ({ heading, subHeading, question }) => {
 
@@ -23,4 +24,4 @@ const CardHeader = ({ heading, subHeading, question }) => {
 	);
 };
 
-export default CardHeader;
+export default memo(CardHeader);

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

@@ -455,18 +455,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

@@ -202,19 +202,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,10 +76,9 @@ const BlockPreview = ( {
 		}
 	}, [ storedPreviewSettings ] );
 
-	return (
-		<div className={ `live-preview__container-${ styling }` }>
-			{ loading && (
-				<div className="live-preview__container--is-skeleton">
+	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' }
@@ -89,8 +88,13 @@ const BlockPreview = ( {
 					<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>
-			) }
+			</div>
+		);
+	});
+
+	return (
+		<div className={ `live-preview__container-${ styling }` }>
+			{ loading && <SkeletonLivePreview/> }
 			{ settings && (
 				<BlockEditorProvider
 					value={ blocks }

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

@@ -29,20 +29,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);

src/OnboardingSPA/utils/global-styles/use-global-styles-output.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty, kebabCase, pickBy, reduce, set } from 'lodash';
+import { get, isEmpty, kebabCase, pickBy, reduce, set, memoize } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -811,38 +811,29 @@ export const getBlockSelectors = ( blockTypes ) => {
 	return result;
 };
 
-export function useGlobalStylesOutput(
-	previewSettings,
-	storedPreviewSettings
-) {
+const generateStylesheets = ( previewSettings, storedPreviewSettings ) => {
+
 	const hasBlockGapSupport =
-		storedPreviewSettings.settings.__experimentalFeatures.spacing.blockGap;
-	const hasFallbackGapSupport = ! hasBlockGapSupport;
-	const disableLayoutStyles = storedPreviewSettings.settings
+		storedPreviewSettings?.settings?.__experimentalFeatures.spacing.blockGap;
+	const hasFallbackGapSupport = !hasBlockGapSupport;
+	const disableLayoutStyles = storedPreviewSettings?.settings
 		?.disableLayoutStyles
-		? storedPreviewSettings.settings.disableLayoutStyles
+		? storedPreviewSettings?.settings?.disableLayoutStyles
 		: true;
 
-	if (
-		! previewSettings?.styles &&
-		! previewSettings?.settings &&
-		! previewSettings?.globalStyles
-	) {
-		return;
-	}
-
 	const requiredSettings = {
-		settings: previewSettings.settings,
+		settings: previewSettings?.settings,
 		styles: previewSettings?.globalStyles
-			? previewSettings.globalStyles
-			: previewSettings.styles,
+			? previewSettings?.globalStyles
+			: previewSettings?.styles,
 	};
-	const blockSelectors = getBlockSelectors( getBlockTypes() );
 
+	const blockSelectors = getBlockSelectors(getBlockTypes());
 	const customProperties = toCustomProperties(
 		requiredSettings,
 		blockSelectors
 	);
+
 	const globalStyles = toStyles(
 		requiredSettings,
 		blockSelectors,
@@ -851,15 +842,15 @@ export function useGlobalStylesOutput(
 		disableLayoutStyles
 	);
 
-	const result = storedPreviewSettings.settings.styles.filter( ( style ) => {
+	const result = storedPreviewSettings?.settings?.styles.filter((style) => {
 		if (
-			! (
-				style.hasOwnProperty( 'id' ) &&
-				( style.id === 'customProperty' || style.id === 'globalStyle' )
+			!(
+				style.hasOwnProperty('id') &&
+				(style.id === 'customProperty' || style.id === 'globalStyle')
 			)
 		)
 			return style;
-	} );
+	});
 
 	const stylesheets = [
 		...result,
@@ -875,6 +866,31 @@ export function useGlobalStylesOutput(
 		},
 	];
 
+	return stylesheets;
+}
+
+// This function serializes those objects into JSON strings to determine the cache key.
+const resolver = (arg1, arg2) => JSON.stringify([arg1, arg2]);
+
+// Make a Memoized function that runs when the input changes
+const generateStylesheetsMemo = memoize(generateStylesheets, resolver);
+
+export function useGlobalStylesOutput(
+	previewSettings,
+	storedPreviewSettings
+) {
+
+	if (
+		!previewSettings &&
+		!previewSettings?.styles &&
+		!previewSettings?.settings &&
+		!previewSettings?.globalStyles
+	) {
+		return;
+	}
+
+	let stylesheets = generateStylesheetsMemo( previewSettings, storedPreviewSettings );
+
 	previewSettings.settings.styles = stylesheets;
 	previewSettings.settings.__unstableResolvedAssets =
 		storedPreviewSettings.settings.__unstableResolvedAssets;