Add basic optimization for usePreviewTemplates to improve render performance

MAILPOET-5949

packages/js/email-editor/src/hooks/use-preview-templates.ts

@@ -1,4 +1,4 @@
-// import { useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { BlockInstance } from '@wordpress/blocks/index';
 import { useSelect } from '@wordpress/data';
@@ -89,13 +89,16 @@ function generateTemplateCssTheme(
 
 export function usePreviewTemplates(
 	customEmailContent = ''
-): TemplatePreview[][] {
+): [ TemplatePreview[], TemplatePreview[], boolean ] {
-	const { templates, patterns, emailPosts } = useSelect( ( select ) => {
+	const { templates, patterns, emailPosts, hasEmailPosts } = useSelect(
+		( select ) => {
 			const contentBlockId =
 				// @ts-expect-error getBlocksByName is not defined in types
 				select( blockEditorStore ).getBlocksByName(
 					'core/post-content'
 				)?.[ 0 ];
+
+			const rawEmailPosts = select( storeName ).getSentEmailEditorPosts();
 			return {
 				templates: select( storeName ).getEmailTemplates(),
 				patterns:
@@ -104,14 +107,14 @@ export function usePreviewTemplates(
 						[ 'core/post-content' ],
 						contentBlockId
 					),
-			emailPosts: select( storeName ).getSentEmailEditorPosts(),
+				emailPosts: rawEmailPosts,
+				hasEmailPosts: !! ( rawEmailPosts && rawEmailPosts?.length ),
 			};
-	}, [] );
+		},
-
+		[]
-	if ( ! templates || ( ! patterns.length && ! customEmailContent ) ) {
+	);
-		return [ [] ];
-	}
 
+	const allTemplates = useMemo( () => {
 		let contentPatternBlocksGeneral = null;
 		let contentPatternBlocks = null;
 		const parsedCustomEmailContent =
@@ -138,7 +141,7 @@ export function usePreviewTemplates(
 			)?.blocks as BlockInstance[];
 		}
 
-	const allTemplates = templates.map(
+		return templates?.map(
 			( template: EmailTemplatePreview ): TemplatePreview => {
 				let parsedTemplate = parse( template.content?.raw );
 				parsedTemplate = setPostContentInnerBlocks(
@@ -163,10 +166,10 @@ export function usePreviewTemplates(
 				};
 			}
 		);
+	}, [ templates, patterns, customEmailContent ] );
 
-	return [
+	const allEmailPosts = useMemo( () => {
-		allTemplates,
+		return emailPosts?.map( ( post: EmailEditorPostType ) => {
-		emailPosts?.map( ( post: EmailEditorPostType ) => {
 			const parsedPostContent = parse( post.content?.raw );
 			const cssThemeData = generateTemplateCssTheme( post, allTemplates );
 			return {
@@ -186,6 +189,8 @@ export function usePreviewTemplates(
 				category: 'recent',
 				type: post.type,
 			};
-		} ) as unknown as TemplatePreview[],
+		} ) as unknown as TemplatePreview[];
-	];
+	}, [ emailPosts, allTemplates ] );
+
+	return [ allTemplates || [], allEmailPosts || [], hasEmailPosts ];
 }