CreateTemplatePartModal: avoid identity warning in useSelect (#67786)

Co-authored-by: jsnajdr <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: Mamaduka <[email protected]>
WordPress · Dec 10, 2024 · b62887b · b62887b · github-actions · Dec 10, 2024
1 parent 4e67ab6
commit b62887b
Showing 1 changed file with 23 additions and 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
@@ -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,32 +218,33 @@ 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">
 										<FlexItem>
 											<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">