UIIN-3160: Decrease the amount of re-renders of ConsortialHoldings …

…component and fix accordion states between instances (#2716) * UIIN-3160: Decrease the amount of rerenders in ConsortialHoldings component * UIIN-3160: Fix problem with accordion state * Update CHANGELOG.md
folio-org · Jan 28, 2025 · 2f80568 · 2f80568
1 parent ca8b571
commit 2f80568
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Change import of `exportToCsv` from `stripes-util` to `stripes-components`. Refs UIIN-3025.
 * ECS: Disable opening item details if a user is not affiliated with item's member tenant. Fixes UIIN-3187.
 * Correctly depend on `inflected`. Refs UIIN-3203.
+* Decrease the amount of rerenders in `ConsortialHoldings` component. Fixes UIIN-3196.
 
 ## [12.0.12](https://github.com/folio-org/ui-inventory/tree/v12.0.12) (2025-01-27)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v12.0.11...v12.0.12)

diff --git a/src/Instance/HoldingsList/consortium/ConsortialHoldings/ConsortialHoldings.js b/src/Instance/HoldingsList/consortium/ConsortialHoldings/ConsortialHoldings.js
@@ -41,7 +41,7 @@ const ConsortialHoldings = ({
       updateStatus({});
       updatePrevInstanceId(instanceId);
     }
-  }, [instanceId]);
+  }, []);
 
   useEffect(() => {
     if (typeof isAllExpanded === 'boolean') {
@@ -91,7 +91,7 @@ const ConsortialHoldings = ({
         onRegisterAccordion={onRegisterNewAcc}
       >
         <Accordion
-          id="consortialHoldings"
+          id={`consortialHoldings.${instance?.id}`}
           label={<FormattedMessage id="ui-inventory.consortialHoldings" />}
           displayWhenClosed={renderExpandAllButton}
           displayWhenOpen={renderExpandAllButton}

diff --git a/src/Instance/HoldingsList/consortium/MemberTenantHoldings/MemberTenantHoldings.js b/src/Instance/HoldingsList/consortium/MemberTenantHoldings/MemberTenantHoldings.js
@@ -74,7 +74,7 @@ const MemberTenantHoldings = ({
   return (
     <Accordion
       className={css.memberTenantHoldings}
-      id={memberTenantId}
+      id={`${memberTenantId}.${instance?.id}`}
       label={name}
     >
       <div className={css.memberTenantHoldings}>

diff --git a/src/Instance/InstanceDetails/InstanceDetails.js b/src/Instance/InstanceDetails/InstanceDetails.js
@@ -8,7 +8,6 @@ import React, {
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { uniqueId } from 'lodash';
 
 import {
   AppIcon,
@@ -212,7 +211,6 @@ const InstanceDetails = forwardRef(({
 
             {isConsortialHoldingsVisible && (
               <ConsortialHoldings
-                key={uniqueId(instance?.id)}
                 instance={instance}
                 prevInstanceId={prevInstanceId.current}
                 updatePrevInstanceId={updatePrevInstanceId}