From a02bf960c99e0f68ca165fc5f56e553c1b410583 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 27 Feb 2025 14:30:54 +0400
Subject: [PATCH] Fields: Avoid 'useSelect' warnings in the template component
 (#69344)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../src/fields/template/template-edit.tsx     | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/fields/src/fields/template/template-edit.tsx b/packages/fields/src/fields/template/template-edit.tsx
index 1a96f5d0cab747..eef5b0734c9977 100644
--- a/packages/fields/src/fields/template/template-edit.tsx
+++ b/packages/fields/src/fields/template/template-edit.tsx
@@ -28,6 +28,8 @@ import { getItemTitle } from '../../actions/utils';
 import type { BasePost } from '../../types';
 import { unlock } from '../../lock-unlock';
 
+const EMPTY_ARRAY: [] = [];
+
 export const TemplateEdit = ( {
 	data,
 	field,
@@ -39,7 +41,7 @@ export const TemplateEdit = ( {
 		typeof data.id === 'number' ? data.id : parseInt( data.id, 10 );
 	const slug = data.slug;
 
-	const { availableTemplates, templates } = useSelect(
+	const { canSwitchTemplate, templates } = useSelect(
 		( select ) => {
 			const allTemplates =
 				select( coreStore ).getEntityRecords< WpTemplate >(
@@ -49,7 +51,7 @@ export const TemplateEdit = ( {
 						per_page: -1,
 						post_type: postType,
 					}
-				) ?? [];
+				) ?? EMPTY_ARRAY;
 
 			const { getHomePage, getPostsPageId } = unlock(
 				select( coreStore )
@@ -63,40 +65,41 @@ export const TemplateEdit = ( {
 
 			return {
 				templates: allTemplates,
-				availableTemplates: allowSwitchingTemplate
-					? allTemplates.filter(
-							( template ) =>
-								template.is_custom &&
-								template.slug !== data.template &&
-								!! template.content.raw // Skip empty templates.
-					  )
-					: [],
+				canSwitchTemplate: allowSwitchingTemplate,
 			};
 		},
-		[ data.template, postId, postType ]
+		[ postId, postType ]
 	);
 
-	const templatesAsPatterns = useMemo(
-		() =>
-			availableTemplates.map( ( template ) => ( {
+	const templatesAsPatterns = useMemo( () => {
+		if ( ! canSwitchTemplate ) {
+			return [];
+		}
+		return templates
+			.filter(
+				( template ) =>
+					template.is_custom &&
+					template.slug !== data.template &&
+					// Skip empty templates.
+					!! template.content.raw
+			)
+			.map( ( template ) => ( {
 				name: template.slug,
 				blocks: parse( template.content.raw ),
 				title: decodeEntities( template.title.rendered ),
 				id: template.id,
-			} ) ),
-		[ availableTemplates ]
-	);
+			} ) );
+	}, [ canSwitchTemplate, data.template, templates ] );
 
 	const shownTemplates = useAsyncList( templatesAsPatterns );
 
 	const value = field.getValue( { item: data } );
+	const foundTemplate = templates.find(
+		( template ) => template.slug === value
+	);
 
 	const currentTemplate = useSelect(
 		( select ) => {
-			const foundTemplate = templates?.find(
-				( template ) => template.slug === value
-			);
-
 			if ( foundTemplate ) {
 				return foundTemplate;
 			}
@@ -128,7 +131,7 @@ export const TemplateEdit = ( {
 				);
 			}
 		},
-		[ postType, slug, templates, value ]
+		[ foundTemplate, postType, slug ]
 	);
 
 	const [ showModal, setShowModal ] = useState( false );