fix(useListTransition): updating an array of objects often leads to a duplicate div in the DOM (#2)

close #2

Author: Daydreamer-riri

playground/src/App.tsx

@@ -1,26 +1,57 @@
 import { useState } from 'react'
-import { SwitchTransition } from 'transition-hooks'
+import { useListTransition } from 'transition-hooks'
+// import { startViewTransition } from 'transition-hooks/viewTransition'
 
 export function App() {
-  const [show, setShow] = useState(false)
+  const [list, setList] = useState([
+    { id: 1, text: '1' },
+    { id: 2, text: '2' },
+  ])
+
+  const { transitionList } = useListTransition(list, {
+    timeout: 1000,
+    keyExtractor: i => i.id,
+  })
+
+  const updateLastItem = () => {
+    const newList = [...list]
+    newList[newList.length - 2] = {
+      id: newList[newList.length - 2].id,
+      text: `${newList[newList.length - 2].text}test`,
+    }
+    setList(newList)
+  }
+
+  const addItem = () => {
+    setList(l => [...l, { id: l.length + 1, text: (l.length + 1).toString() }])
+  }
 
   return (
     <div>
-      <SwitchTransition state={show}>
-        {(state, { status }) => {
+      <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
+        <button onClick={addItem}>add</button>
+        <button onClick={updateLastItem}>update last item</button>
+      </div>
+      <ul>
+        {transitionList((item, { key, simpleStatus }) => {
           return (
-            <div
+            <li
               style={{
-                transition: 'opacity 0.3s',
-                opacity: status === 'entering' || status === 'entered' ? 1 : 0,
+                position: simpleStatus === 'exit' ? 'absolute' : 'relative',
+                opacity: simpleStatus === 'enter' ? 1 : 0,
+                transform:
+                  simpleStatus === 'enter'
+                    ? 'translateX(0)'
+                    : 'translateX(20px)',
+                transition: 'all .6s',
+                // viewTransitionName: simpleStatus === 'enter' ? `transition-list-${key}` : '',
               }}
             >
-              Hello Word {state ? 'true' : 'false'}
-            </div>
+              - {item.text}
+            </li>
           )
-        }}
-      </SwitchTransition>
-      <button onClick={() => setShow(!show)}>toggle</button>
+        })}
+      </ul>
     </div>
   )
 }

src/hooks/useListTransition.tsx

@@ -50,13 +50,43 @@ export function useListTransition<Item>(list: Array<Item>, options?: ListTransit
 
   useEffect(
     () => {
+      // const hasChanged = listState.length !== list.length
+      //   || (hasCustomKeyExtractor && list.some((item, index) => keyExtractor(item) !== listState[index].key))
+      // console.log('🚀 ~ hasChanged:', hasChanged)
+      // if (!hasChanged)
+      //   return
+
       const newItemsWithIndex: Array<ItemWithKey<Item>> = []
+      const updatedItemsWithIndex: Array<ItemWithKey<Item>> = []
 
       list.forEach((item, index) => {
-        if (listState.every(itemState => itemState.item !== item))
-          newItemsWithIndex.push({ item, index })
+        if (listState.every(itemState => itemState.item !== item)) {
+          if (hasCustomKeyExtractor && listState.some(itemState => keyExtractor(item) === itemState.key))
+            updatedItemsWithIndex.push({ item, index })
+          else
+            newItemsWithIndex.push({ item, index })
+        }
       })
 
+      if (updatedItemsWithIndex.length > 0) {
+        viewTransition(() => {
+          setListState(prevListState => {
+            const newListState = [...prevListState]
+            updatedItemsWithIndex.forEach(({ item }) => {
+              const targetIndex = newListState.findIndex(itemState => itemState.key === keyExtractor(item))
+              if (targetIndex > -1) {
+                const originItem = newListState[targetIndex]
+                newListState[targetIndex] = {
+                  ...originItem,
+                  item,
+                }
+              }
+            })
+            return newListState
+          })
+        })
+      }
+
       // 1 add new items into list state
       if (newItemsWithIndex.length > 0) {
         viewTransition(() => {
@@ -138,11 +168,15 @@ export function useListTransition<Item>(list: Array<Item>, options?: ListTransit
       ) {
         viewTransition(() => {
           setListState(
-            list.map(item => ({
-              item,
-              key: keyExtractor(item),
-              ...getState(STATUS.entered),
-            })),
+            list.map(item => {
+              const key = keyExtractor(item)
+              const originItem = listState.find(itemState => itemState.key === key)
+              return {
+                ...(originItem || getState(STATUS.entered)),
+                item,
+                key,
+              }
+            }),
           )
         })
       }