From 64b8c680fc2757d1ab80b3c1bc12daf3925832e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Tue, 21 May 2024 10:14:41 +0100 Subject: [PATCH] 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 --- .../update-fix-performance-issues-in-attributes-modal | 4 ++++ .../attribute-control/new-attribute-modal.tsx | 10 +++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal diff --git a/packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal b/packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal new file mode 100644 index 00000000000..76eaae0adb8 --- /dev/null +++ b/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 diff --git a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx b/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx index 2800bdb8c19..50424c60ac2 100644 --- a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx +++ b/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' );