fix(hierarchylist): need to useDeepCompareEffect to stop infinite loop

carbon-design-system · Nov 12, 2020 · aa16110 · aa16110
1 parent 0dceb12
commit aa16110
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/List/HierarchyList/HierarchyList.jsx b/src/components/List/HierarchyList/HierarchyList.jsx
@@ -244,7 +244,8 @@ const HierarchyList = ({
     cancelMoveClicked();
   };
 
-  useEffect(
+  useDeepCompareEffect(
+    // have to use deep compare to accurately compare items
     () => {
       // Expand the parent elements of the defaultSelectedId
       if (defaultSelectedId) {

diff --git a/src/components/List/List.jsx b/src/components/List/List.jsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { DragDropContext } from 'react-dnd';
@@ -144,7 +144,7 @@ const List = forwardRef((props, ref) => {
     itemWillMove,
     emptyState,
   } = props;
-  const mergedI18n = { ...defaultProps.i18n, i18n };
+  const mergedI18n = useMemo(() => ({ ...defaultProps.i18n, i18n }), [i18n]);
   const selectedItemRef = ref;
   const ListHeader = overrides?.header?.component || DefaultListHeader;
   const renderItemAndChildren = (item, index, parentId, level) => {