Fix issue with descriptor indexes when children change

Braden1996 · Braden1996 · commit d9bb13345a56 · 2025-09-03T18:01:35.000+01:00
diff --git a/example/src/components/features/color-data-list/color-data-list-row.tsx b/example/src/components/features/color-data-list/color-data-list-row.tsx
@@ -26,7 +26,7 @@ export function ColorDataListRow({colors}: Omit<ColorDataListRowItem, "id">) {
     return (
         <ReactDataList.Row
             id={id}
-            item={React.useMemo(() => ({id, colors}), [id, colors])}
+            item={React.useMemo(() => ({id, colors}), [colors])}
             render={renderColorDataList}
             recyclerType="color-data-list"
         />
diff --git a/example/src/components/features/list-header/list-header-data-list-row.tsx b/example/src/components/features/list-header/list-header-data-list-row.tsx
@@ -28,7 +28,7 @@ export function ListHeaderDataListRow({title}: Omit<ListHeaderItem, "id">) {
     return (
         <ReactDataList.Row
             id={id}
-            item={React.useMemo(() => ({id, title}), [id, title])}
+            item={React.useMemo(() => ({id, title}), [title])}
             render={renderListHeader}
             recyclerType="list-header"
         />
diff --git a/example/src/components/features/list-item/list-item-data-list-row.tsx b/example/src/components/features/list-item/list-item-data-list-row.tsx
@@ -34,7 +34,7 @@ export function ListItemDataListRow({name, color}: Omit<ListItemItem, "id">) {
     return (
         <ReactDataList.Row
             id={id}
-            item={React.useMemo(() => ({id, name, color}), [id, name, color])}
+            item={React.useMemo(() => ({id, name, color}), [name, color])}
             render={renderListItem}
             recyclerType="list-item"
         />
diff --git a/src/data-list-descriptor-context.tsx b/src/data-list-descriptor-context.tsx
@@ -5,7 +5,8 @@ import {createDescendantContext} from "@attio/react-descendants"
 import type {DataListDescriptor, DataListDescriptorDescendant} from "./data-list-types"
 
 export interface DataListDescriptorContextProviderContext {
-    attachDescriptors: (index: number, descriptors: Array<DataListDescriptor>) => () => void
+    attachDescriptors: (id: string, descriptors: Array<DataListDescriptor>) => () => void
+    markForIndex: (id: string, index: number) => void
 }
 
 const DataListDescriptorContext = React.createContext<
diff --git a/src/data-list-descriptors.tsx b/src/data-list-descriptors.tsx
@@ -1,8 +1,10 @@
 import * as React from "react"
 
 import type {
+    DataListAllDescriptors,
     DataListDescriptor,
-    DataListDescriptors as DataListDescriptorsType,
+    DataListDescriptorIndexes,
+    DescriptorId,
 } from "./data-list-types"
 import {
     DataListDescriptorContextProvider,
@@ -13,46 +15,70 @@ import {
 export interface DataListDescriptorsProps<TRenderItem>
     extends Omit<
         DataListDescriptorContextProviderContext,
-        "children" | "attachDescriptors" | "updateDescriptorIndex"
+        "children" | "attachDescriptors" | "markForIndex"
     > {
-    descriptors: React.ReactNode
-    setDescriptors: React.Dispatch<React.SetStateAction<DataListDescriptorsType<TRenderItem>>>
+    rowChildren: React.ReactNode
+    setAllDescriptors: React.Dispatch<React.SetStateAction<DataListAllDescriptors<TRenderItem>>>
+    setDescriptorIndexes: React.Dispatch<React.SetStateAction<DataListDescriptorIndexes>>
 }
 
 export function DataListDescriptors<TRenderItem>({
-    descriptors,
-    setDescriptors,
+    rowChildren,
+    setAllDescriptors,
+    setDescriptorIndexes: outerSetDescriptorIndexes,
 }: DataListDescriptorsProps<TRenderItem>) {
     const attachDescriptors: DataListDescriptorContextProviderContext["attachDescriptors"] =
         React.useCallback(
-            (index: number, additionalDescriptors: Array<DataListDescriptor<TRenderItem>>) => {
-                setDescriptors((prevDescriptors) => {
-                    const newDescriptors = new Map(prevDescriptors)
-                    newDescriptors.set(index, additionalDescriptors)
+            (id: DescriptorId, rowDescriptors: Array<DataListDescriptor<TRenderItem>>) => {
+                setAllDescriptors((prevAllDescriptors) => {
+                    const newDescriptors = new Map(prevAllDescriptors)
+                    newDescriptors.set(id, rowDescriptors)
                     return newDescriptors
                 })
 
-                // console.log(
-                //     "attachDescriptors",
-                //     index,
-                //     additionalDescriptors.map((v) => v.item)
-                // )
-
                 return () => {
-                    setDescriptors((prevDescriptors) => {
-                        const newDescriptors = new Map(prevDescriptors)
-                        newDescriptors.delete(index)
+                    setAllDescriptors((prevAllDescriptors) => {
+                        const newDescriptors = new Map(prevAllDescriptors)
+                        newDescriptors.delete(id)
                         return newDescriptors
                     })
                 }
             },
-            [setDescriptors]
+            [setAllDescriptors]
+        )
+
+    const markForIndex: DataListDescriptorContextProviderContext["markForIndex"] =
+        React.useCallback(
+            (id: DescriptorId, index: number) => {
+                outerSetDescriptorIndexes((prevDescriptorIndexes) => {
+                    const newDescriptorsIndex = new Map(prevDescriptorIndexes)
+                    newDescriptorsIndex.set(index, id)
+                    return newDescriptorsIndex
+                })
+
+                return () => {
+                    outerSetDescriptorIndexes((prevDescriptorIndexes) => {
+                        const currentIdAtIndex = prevDescriptorIndexes.get(index)
+
+                        // Already used
+                        if (currentIdAtIndex !== id) return prevDescriptorIndexes
+
+                        const newDescriptorsIndex = new Map(prevDescriptorIndexes)
+                        newDescriptorsIndex.delete(index)
+                        return newDescriptorsIndex
+                    })
+                }
+            },
+            [outerSetDescriptorIndexes]
         )
 
     return (
-        <DataListDescriptorContextProvider attachDescriptors={attachDescriptors}>
+        <DataListDescriptorContextProvider
+            attachDescriptors={attachDescriptors}
+            markForIndex={markForIndex}
+        >
             <DataListDescriptorDescendantContextProvider>
-                {descriptors}
+                {rowChildren}
             </DataListDescriptorDescendantContextProvider>
         </DataListDescriptorContextProvider>
     )
diff --git a/src/data-list-master-renderer.tsx b/src/data-list-master-renderer.tsx
@@ -1,10 +1,11 @@
 import React, {useDeferredValue} from "react"
 
 import type {
+    DataListAllDescriptors,
     DataListDescriptor,
-    DataListDescriptors,
+    DataListDescriptorIndexes,
     DataListRenderer,
-    DataListRendererProps as DataListRendererPropsType,
+    DataListRendererProps,
     DataListRendererRootRenderItem,
     DataListRendererRootRenderItemArgs,
     DataListRenderListItemInfo,
@@ -13,31 +14,37 @@ import {DataListRendererContextProvider} from "./data-list-renderer-context"
 import {cancelFrame, requestFrame} from "./utils/request-frame"
 
 export interface DataListMasterRendererProps<TRenderItem>
-    extends Omit<DataListRendererPropsType<TRenderItem>, "data" | "rootRenderItem" | "getItemId"> {
+    extends Omit<DataListRendererProps<TRenderItem>, "data" | "rootRenderItem" | "getItemId"> {
     renderer: DataListRenderer<TRenderItem> | ReturnType<DataListRenderer<TRenderItem>>
-    descriptors: DataListDescriptors<TRenderItem>
+    allDescriptors: DataListAllDescriptors<TRenderItem>
+    descriptorIndexes: DataListDescriptorIndexes
 }
 
 export function DataListMasterRenderer<TRenderItem>({
     renderer,
-    descriptors,
+    allDescriptors,
+    descriptorIndexes,
     ...rest
 }: DataListMasterRendererProps<TRenderItem>) {
     const newData = React.useMemo((): Array<
         DataListRendererRootRenderItemArgs<TRenderItem>["item"]
     > => {
-        const sortedDescriptors = [...descriptors.entries()].sort((a, b) => a[0] - b[0])
+        const sortedDescriptorIds = [...descriptorIndexes.entries()].sort((a, b) => a[0] - b[0])
 
-        return sortedDescriptors.flatMap(([index, descriptors]) =>
-            descriptors.map((d: DataListDescriptor<TRenderItem>) => ({
+        return sortedDescriptorIds.flatMap(([index, descriptorId]) => {
+            const descriptorsForId = allDescriptors.get(descriptorId)
+
+            if (!descriptorsForId) return []
+
+            return descriptorsForId.map((d: DataListDescriptor<TRenderItem>) => ({
                 descriptor: {
                     ...d,
                     id: [index, ...(Array.isArray(d.id) ? d.id : [d.id])],
                 },
                 descriptorSourceIndex: index,
             }))
-        )
-    }, [descriptors])
+        })
+    }, [allDescriptors, descriptorIndexes])
 
     const deferredData = useDeferredValue(newData)
 
diff --git a/src/data-list-row.ts b/src/data-list-row.ts
@@ -10,14 +10,21 @@ import {
  * Connects a single item row to the list.
  */
 export function DataListRow<TRenderItem>(descriptor: DataListDescriptor<TRenderItem>) {
-    const {attachDescriptors} = useDataListDescriptorContext()
+    const {attachDescriptors, markForIndex} = useDataListDescriptorContext()
+
+    const id = React.useId()
+    React.useLayoutEffect(() => {
+        const detach = attachDescriptors(id, [descriptor])
+
+        return detach
+    }, [attachDescriptors, descriptor])
 
     const index = useDataListDescriptorDescendant({})
     React.useLayoutEffect(() => {
-        const detach = attachDescriptors(index, [descriptor])
+        const detach = markForIndex(id, index)
 
         return detach
-    }, [attachDescriptors, descriptor, index])
+    }, [markForIndex, index])
 
     return null
 }
diff --git a/src/data-list-rows.ts b/src/data-list-rows.ts
@@ -14,14 +14,21 @@ interface DataListRowsProps<TRenderItem> {
  * Connects a single item row to the list.
  */
 export function DataListRows<TRenderItem>({descriptors}: DataListRowsProps<TRenderItem>) {
-    const {attachDescriptors} = useDataListDescriptorContext()
+    const {attachDescriptors, markForIndex} = useDataListDescriptorContext()
+
+    const id = React.useId()
+    React.useLayoutEffect(() => {
+        const detach = attachDescriptors(id, descriptors)
+
+        return detach
+    }, [attachDescriptors, descriptors])
 
     const index = useDataListDescriptorDescendant({})
     React.useLayoutEffect(() => {
-        const detach = attachDescriptors(index, descriptors)
+        const detach = markForIndex(id, index)
 
         return detach
-    }, [attachDescriptors, descriptors, index])
+    }, [markForIndex, index])
 
     return null
 }
diff --git a/src/data-list-types.d.ts b/src/data-list-types.d.ts
@@ -74,14 +74,21 @@ export type DataListRenderListItem<TRenderItem> = (
     props: DataListRenderListItemInfoWithIndex<TRenderItem>
 ) => React.ReactElement | null
 
+type DescriptorId = string
+
 /**
  * The internal array of descriptors.
  */
-export type DataListDescriptors<TRenderItem = any> = Map<
-    number,
+export type DataListAllDescriptors<TRenderItem = any> = Map<
+    DescriptorId,
     Array<DataListDescriptor<TRenderItem>>
 >
 
+/**
+ * Tracks the position of descriptors at particular indexes.
+ */
+export type DataListDescriptorIndexes = Map<number, DescriptorId>
+
 /**
  * The internal data array.
  * This is similar to DataListDescriptors, but has been flattened according
diff --git a/src/data-list.tsx b/src/data-list.tsx
@@ -1,12 +1,15 @@
 import React from "react"
 
-import type {DataListDescriptors as DataListDescriptorsType} from "./data-list-types"
+import type {DataListAllDescriptors, DataListDescriptorIndexes} from "./data-list-types"
 import {DataListDescriptors, type DataListDescriptorsProps} from "./data-list-descriptors"
 import {DataListMasterRenderer, type DataListMasterRendererProps} from "./data-list-master-renderer"
 
 export interface DataListProps<TRenderItem>
-    extends Omit<DataListMasterRendererProps<TRenderItem>, "descriptors" | "updateDescriptorIndex">,
-        Omit<DataListDescriptorsProps<TRenderItem>, "descriptors" | "setDescriptors"> {
+    extends Omit<DataListMasterRendererProps<TRenderItem>, "allDescriptors" | "descriptorIndexes">,
+        Omit<
+            DataListDescriptorsProps<TRenderItem>,
+            "rowChildren" | "setAllDescriptors" | "setDescriptorIndexes"
+        > {
     children: React.ReactNode
 }
 
@@ -17,14 +20,26 @@ export interface DataListProps<TRenderItem>
  * Supports familiar React concepts such as Suspense and Error boundaries.
  */
 export function DataList<TRenderItem>({renderer, children, ...rest}: DataListProps<TRenderItem>) {
-    const [descriptors, setDescriptors] = React.useState<DataListDescriptorsType<TRenderItem>>(
+    const [allDescriptors, setAllDescriptors] = React.useState<DataListAllDescriptors<TRenderItem>>(
+        new Map()
+    )
+    const [descriptorIndexes, setDescriptorIndexes] = React.useState<DataListDescriptorIndexes>(
         new Map()
     )
 
     return (
         <>
-            <DataListDescriptors setDescriptors={setDescriptors} descriptors={children} />
-            <DataListMasterRenderer {...rest} renderer={renderer} descriptors={descriptors} />
+            <DataListDescriptors
+                setAllDescriptors={setAllDescriptors}
+                setDescriptorIndexes={setDescriptorIndexes}
+                rowChildren={children}
+            />
+            <DataListMasterRenderer
+                {...rest}
+                renderer={renderer}
+                allDescriptors={allDescriptors}
+                descriptorIndexes={descriptorIndexes}
+            />
         </>
     )
 }

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,8 @@ import {createDescendantContext} from "@attio/react-descendants"`
`5`	`5`	`import type {DataListDescriptor, DataListDescriptorDescendant} from "./data-list-types"`
`6`	`6`
`7`	`7`	`export interface DataListDescriptorContextProviderContext {`
`8`		`- attachDescriptors: (index: number, descriptors: Array<DataListDescriptor>) => () => void`
	`8`	`+ attachDescriptors: (id: string, descriptors: Array<DataListDescriptor>) => () => void`
	`9`	`+ markForIndex: (id: string, index: number) => void`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`const DataListDescriptorContext = React.createContext<`