diff --git a/packages/react/src/composite/list/CompositeList.tsx b/packages/react/src/composite/list/CompositeList.tsx index be2ed3827c..1a73c49d0b 100644 --- a/packages/react/src/composite/list/CompositeList.tsx +++ b/packages/react/src/composite/list/CompositeList.tsx @@ -2,9 +2,8 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare'; -import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; import { CompositeListContext } from './CompositeListContext'; +import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; function sortByDocumentPosition(a: Node, b: Node) { const position = a.compareDocumentPosition(b); @@ -25,26 +24,6 @@ function sortByDocumentPosition(a: Node, b: Node) { export type CompositeMetadata = { index?: number | null } & CustomMetadata; -function areMapsEqual( - map1: Map | null>, - map2: Map | null>, -) { - if (map1.size !== map2.size) { - return false; - } - for (const [key, value] of map1.entries()) { - const value2 = map2.get(key); - // compare the index before comparing everything else - if (value?.index !== value2?.index) { - return false; - } - if (value2 !== undefined && !fastObjectShallowCompare(value, value2)) { - return false; - } - } - return true; -} - /** * Provides context for a list of items in a composite component. * @ignore - internal component. @@ -66,26 +45,25 @@ function CompositeList(props: CompositeList.Props) { }); }, []); - useEnhancedEffect(() => { - const newMap = new Map(map); - - const nodes = Array.from(newMap.keys()).sort(sortByDocumentPosition); + const sortedMap = React.useMemo(() => { + const newMap = new Map>(); + const sortedNodes = Array.from(map.keys()).sort(sortByDocumentPosition); - nodes.forEach((node, index) => { + sortedNodes.forEach((node, index) => { const metadata = map.get(node) ?? ({} as CompositeMetadata); - newMap.set(node, { ...metadata, index }); }); - if (!areMapsEqual(map, newMap)) { - setMap(newMap); - onMapChange?.(newMap); - } - }, [map, onMapChange]); + return newMap; + }, [map]); + + useEnhancedEffect(() => { + onMapChange?.(sortedMap); + }, [sortedMap, onMapChange]); const contextValue = React.useMemo( - () => ({ register, unregister, map, elementsRef, labelsRef }), - [register, unregister, map, elementsRef, labelsRef], + () => ({ register, unregister, map: sortedMap, elementsRef, labelsRef }), + [register, unregister, sortedMap, elementsRef, labelsRef], ); return (