From b62887b74de7bab9031ecb9bbb31bb736a6c8eae Mon Sep 17 00:00:00 2001
From: Jarda Snajdr <jsnajdr@gmail.com>
Date: Tue, 10 Dec 2024 12:49:34 +0100
Subject: [PATCH] CreateTemplatePartModal: avoid identity warning in useSelect
 (#67786)

Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../create-template-part-modal/index.tsx      | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/fields/src/components/create-template-part-modal/index.tsx b/packages/fields/src/components/create-template-part-modal/index.tsx
index c7dc54df84a2a..4043a7824fac4 100644
--- a/packages/fields/src/components/create-template-part-modal/index.tsx
+++ b/packages/fields/src/components/create-template-part-modal/index.tsx
@@ -50,6 +50,13 @@ type CreateTemplatePartModalContentsProps = {
 	defaultTitle?: string;
 };
 
+type TemplatePartArea = {
+	area: string;
+	label: string;
+	icon: string;
+	description: string;
+};
+
 /**
  * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.
  * This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
@@ -124,22 +131,14 @@ export function CreateTemplatePartModalContents( {
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
-	const defaultTemplatePartAreas = useSelect( ( select ) => {
-		const areas =
+	const defaultTemplatePartAreas = useSelect(
+		( select ) =>
 			// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
 			select( coreStore ).getEntityRecord< {
-				default_template_part_areas: Array< {
-					area: string;
-					label: string;
-					icon: string;
-					description: string;
-				} >;
-			} >( 'root', '__unstableBase' )?.default_template_part_areas || [];
-
-		return areas.map( ( item ) => {
-			return { ...item, icon: getTemplatePartIcon( item.icon ) };
-		} );
-	}, [] );
+				default_template_part_areas: Array< TemplatePartArea >;
+			} >( 'root', '__unstableBase' )?.default_template_part_areas,
+		[]
+	);
 
 	async function createTemplatePart() {
 		if ( ! title || isSubmitting ) {
@@ -219,12 +218,13 @@ export function CreateTemplatePartModalContents( {
 						}
 						checked={ area }
 					>
-						{ defaultTemplatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
+						{ ( defaultTemplatePartAreas ?? [] ).map( ( item ) => {
+							const icon = getTemplatePartIcon( item.icon );
+							return (
 								<Radio
 									__next40pxDefaultSize
-									key={ label }
-									value={ value }
+									key={ item.label }
+									value={ item.area }
 									className="fields-create-template-part-modal__area-radio"
 								>
 									<Flex align="start" justify="start">
@@ -232,19 +232,19 @@ export function CreateTemplatePartModalContents( {
 											<Icon icon={ icon } />
 										</FlexItem>
 										<FlexBlock className="fields-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
+											{ item.label }
+											<div>{ item.description }</div>
 										</FlexBlock>
 
 										<FlexItem className="fields-create-template-part-modal__checkbox">
-											{ area === value && (
+											{ area === item.area && (
 												<Icon icon={ check } />
 											) }
 										</FlexItem>
 									</Flex>
 								</Radio>
-							)
-						) }
+							);
+						} ) }
 					</RadioGroup>
 				</BaseControl>
 				<HStack justify="right">