Product Block Editor: fix performance issue when rendering thousands of attributes in the attributes modal (#47638)

* define select deps to avoid re-renders

* chnagelog

* define sort criteria out of the cmp scope

packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Block Editor: fix perfomance issue when rendering thousands of attributes in the attributes modal

packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx

@@ -57,6 +57,11 @@ type AttributeForm = {
 	attributes: Array< EnhancedProductAttribute | null >;
 };
 
+/*
+ * Sort criteria for the attributes.
+ */
+const attributeSortCriteria = { order_by: 'name' };
+
 export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 	title = __( 'Add attributes', 'woocommerce' ),
 	description = '',
@@ -193,8 +198,6 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 		name: defaultSearch,
 	} as EnhancedProductAttribute;
 
-	const attributeSortCriteria = { order_by: 'name' };
-
 	const { attributes, isLoadingAttributes } = useSelect(
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
@@ -211,7 +214,8 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 				),
 				attributes: getAttributes( attributeSortCriteria ),
 			};
-		}
+		},
+		[]
 	);
 
 	const { createErrorNotice } = useDispatch( 'core/notices' );