From 84327641748ee4d78e6b899726d32c9ac88a3fc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 30 Jul 2026 18:57:22 +0800
Subject: [PATCH 1/3] fix: resolve scroll key against latest data

---
 src/hooks/useScrollTo.tsx | 35 ++++++++++++++++++++---------------
 tests/scroll.test.js      | 25 +++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useScrollTo.tsx b/src/hooks/useScrollTo.tsx
index ce143c9..4ca3d2f 100644
--- a/src/hooks/useScrollTo.tsx
+++ b/src/hooks/useScrollTo.tsx
@@ -61,14 +61,15 @@ export default function useScrollTo<T>(
 ): (arg: number | ScrollTarget) => void {
   const scrollRef = React.useRef<number | undefined>(undefined);
 
-  const [syncState, setSyncState] = React.useState<{
-    times: number;
-    index: number;
-    offset: ScrollOffset;
-    originAlign: ScrollAlign;
-    targetAlign?: 'top' | 'bottom';
-    lastTop?: number;
-  }>(null);
+  const [syncState, setSyncState] = React.useState<
+    {
+      times: number;
+      offset: ScrollOffset;
+      originAlign: ScrollAlign;
+      targetAlign?: 'top' | 'bottom';
+      lastTop?: number;
+    } & ({ index: number } | { key: React.Key })
+  >(null);
 
   // ========================== Sync Scroll ==========================
   useLayoutEffect(() => {
@@ -81,17 +82,21 @@ export default function useScrollTo<T>(
 
       collectHeight();
 
-      const { targetAlign, originAlign, index, offset: rawOffset } = syncState;
+      const { targetAlign, originAlign, offset: rawOffset } = syncState;
+      const index =
+        'key' in syncState
+          ? data.findIndex((item) => getKey(item) === syncState.key)
+          : syncState.index;
       const mergedAlign = targetAlign || originAlign;
       const offset = getOffset(rawOffset, { getSize, align: mergedAlign });
 
       const height = containerRef.current.clientHeight;
-      let needCollectHeight = false;
+      let needCollectHeight = 'key' in syncState && index < 0;
       let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
       let targetTop: number | null = null;
 
       // Go to next frame if height not exist
-      if (height) {
+      if (height && index >= 0) {
         // Get top & bottom
         let stackTop = 0;
         let itemTop = 0;
@@ -186,20 +191,20 @@ export default function useScrollTo<T>(
     if (typeof arg === 'number') {
       syncScrollTop(arg);
     } else if (arg && typeof arg === 'object') {
-      let index: number;
+      let target: { index: number } | { key: React.Key };
       const { align } = arg;
 
       if ('index' in arg) {
-        ({ index } = arg);
+        target = { index: arg.index };
       } else {
-        index = data.findIndex((item) => getKey(item) === arg.key);
+        target = { key: arg.key };
       }
 
       const { offset: rawOffset = 0 } = arg;
 
       setSyncState({
         times: 0,
-        index,
+        ...target,
         offset: rawOffset,
         originAlign: align,
       });
diff --git a/tests/scroll.test.js b/tests/scroll.test.js
index f9dd1d2..0c1ea28 100644
--- a/tests/scroll.test.js
+++ b/tests/scroll.test.js
@@ -208,6 +208,31 @@ describe('List.Scroll', () => {
       expect(container.querySelector('ul').scrollTop).toEqual(520);
     });
 
+    it('refreshes key index when data changes', () => {
+      const ref = React.createRef();
+
+      function Demo() {
+        const [data, setData] = React.useState(genData(1));
+
+        return (
+          <>
+            <button
+              onClick={() => {
+                setData(genData(100));
+                ref.current.scrollTo({ key: '30', align: 'top' });
+              }}
+            />
+            {genNode({ itemHeight: 20, height: 100, data, ref })}
+          </>
+        );
+      }
+
+      const { container } = render(<Demo />);
+      fireEvent.click(container.querySelector('button'));
+
+      expect(container.querySelector('ul').scrollTop).toEqual(600);
+    });
+
     it('supports function offset with getSize info', () => {
       const { scrollTo, container } = presetList();
       const offset = jest.fn(({ getSize }) => getSize('2').bottom);

From 8eac1d4fb16ae3d550e45e2699261ea12bcf9cea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 31 Jul 2026 10:57:34 +0800
Subject: [PATCH 2/3] perf: cache resolved scroll index

---
 src/hooks/useScrollTo.tsx | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/hooks/useScrollTo.tsx b/src/hooks/useScrollTo.tsx
index 4ca3d2f..da030f1 100644
--- a/src/hooks/useScrollTo.tsx
+++ b/src/hooks/useScrollTo.tsx
@@ -61,15 +61,15 @@ export default function useScrollTo<T>(
 ): (arg: number | ScrollTarget) => void {
   const scrollRef = React.useRef<number | undefined>(undefined);
 
-  const [syncState, setSyncState] = React.useState<
-    {
-      times: number;
-      offset: ScrollOffset;
-      originAlign: ScrollAlign;
-      targetAlign?: 'top' | 'bottom';
-      lastTop?: number;
-    } & ({ index: number } | { key: React.Key })
-  >(null);
+  const [syncState, setSyncState] = React.useState<{
+    times: number;
+    index: number;
+    key?: React.Key;
+    offset: ScrollOffset;
+    originAlign: ScrollAlign;
+    targetAlign?: 'top' | 'bottom';
+    lastTop?: number;
+  }>(null);
 
   // ========================== Sync Scroll ==========================
   useLayoutEffect(() => {
@@ -84,7 +84,7 @@ export default function useScrollTo<T>(
 
       const { targetAlign, originAlign, offset: rawOffset } = syncState;
       const index =
-        'key' in syncState
+        syncState.index < 0 && 'key' in syncState
           ? data.findIndex((item) => getKey(item) === syncState.key)
           : syncState.index;
       const mergedAlign = targetAlign || originAlign;
@@ -165,6 +165,7 @@ export default function useScrollTo<T>(
         setSyncState({
           ...syncState,
           times: syncState.times + 1,
+          index,
           targetAlign: newTargetAlign,
           lastTop: targetTop,
         });
@@ -191,16 +192,9 @@ export default function useScrollTo<T>(
     if (typeof arg === 'number') {
       syncScrollTop(arg);
     } else if (arg && typeof arg === 'object') {
-      let target: { index: number } | { key: React.Key };
       const { align } = arg;
-
-      if ('index' in arg) {
-        target = { index: arg.index };
-      } else {
-        target = { key: arg.key };
-      }
-
       const { offset: rawOffset = 0 } = arg;
+      const target = 'index' in arg ? { index: arg.index } : { index: -1, key: arg.key };
 
       setSyncState({
         times: 0,

From 5475c99071914bd5b33973108f2f56c6d17cc91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 31 Jul 2026 11:22:43 +0800
Subject: [PATCH 3/3] refactor: simplify scroll key retry

---
 src/hooks/useScrollTo.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useScrollTo.tsx b/src/hooks/useScrollTo.tsx
index da030f1..592a670 100644
--- a/src/hooks/useScrollTo.tsx
+++ b/src/hooks/useScrollTo.tsx
@@ -84,14 +84,14 @@ export default function useScrollTo<T>(
 
       const { targetAlign, originAlign, offset: rawOffset } = syncState;
       const index =
-        syncState.index < 0 && 'key' in syncState
-          ? data.findIndex((item) => getKey(item) === syncState.key)
-          : syncState.index;
+        syncState.index >= 0
+          ? syncState.index
+          : data.findIndex((item) => getKey(item) === syncState.key);
       const mergedAlign = targetAlign || originAlign;
       const offset = getOffset(rawOffset, { getSize, align: mergedAlign });
 
       const height = containerRef.current.clientHeight;
-      let needCollectHeight = 'key' in syncState && index < 0;
+      let needCollectHeight = false;
       let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
       let targetTop: number | null = null;
 
@@ -162,13 +162,13 @@ export default function useScrollTo<T>(
 
       // Trigger next effect
       if (needCollectHeight) {
-        setSyncState({
-          ...syncState,
-          times: syncState.times + 1,
+        setSyncState((prev) => ({
+          ...prev,
+          times: prev.times + 1,
           index,
           targetAlign: newTargetAlign,
           lastTop: targetTop,
-        });
+        }));
       }
     } else if (process.env.NODE_ENV !== 'production' && syncState?.times === MAX_TIMES) {
       warning(
@@ -192,13 +192,23 @@ export default function useScrollTo<T>(
     if (typeof arg === 'number') {
       syncScrollTop(arg);
     } else if (arg && typeof arg === 'object') {
+      let index: number;
+      let key: React.Key;
       const { align } = arg;
+
+      if ('index' in arg) {
+        ({ index } = arg);
+      } else {
+        key = arg.key;
+        index = data.findIndex((item) => getKey(item) === key);
+      }
+
       const { offset: rawOffset = 0 } = arg;
-      const target = 'index' in arg ? { index: arg.index } : { index: -1, key: arg.key };
 
       setSyncState({
         times: 0,
-        ...target,
+        index,
+        key,
         offset: rawOffset,
         originAlign: align,
       });