fix: scrollTo flash

examples/basic.tsx

@@ -1,18 +1,17 @@
-/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 import * as React from 'react';
-import List, { ListRef } from '../src/List';
+import List, { type ListRef } from '../src/List';
 import './basic.less';
 
 interface Item {
-  id: string;
+  id: number;
 }
 
 const MyItem: React.ForwardRefRenderFunction<any, Item> = ({ id }, ref) => (
   <span
     ref={ref}
-    // style={{
-    //   // height: 30 + (id % 2 ? 0 : 10),
-    // }}
+    style={{
+      height: 30 + (id % 2 ? 0 : 10),
+    }}
     className="fixed-item"
     onClick={() => {
       console.log('Click:', id);
@@ -35,7 +34,7 @@ class TestItem extends React.Component<Item, {}> {
 const data: Item[] = [];
 for (let i = 0; i < 1000; i += 1) {
   data.push({
-    id: String(i),
+    id: i,
   });
 }
 
@@ -44,7 +43,7 @@ const TYPES = [
   { name: 'ref react node', type: 'react', component: TestItem },
 ];
 
-const onScroll: React.UIEventHandler<HTMLElement> = e => {
+const onScroll: React.UIEventHandler<HTMLElement> = (e) => {
   console.log('scroll:', e.currentTarget.scrollTop);
 };
 
@@ -160,7 +159,7 @@ const Demo = () => {
           type="button"
           onClick={() => {
             listRef.current.scrollTo({
-              key: '50',
+              key: 50,
               align: 'auto',
             });
           }}
@@ -171,7 +170,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            setVisible(v => !v);
+            setVisible((v) => !v);
           }}
         >
           visible

src/List.tsx

@@ -431,7 +431,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     heights,
     itemHeight,
     getKey,
-    collectHeight,
+    () => collectHeight(true),
     syncScrollTop,
     delayHideScrollBar,
   );

src/hooks/useHeights.tsx

@@ -9,7 +9,12 @@ export default function useHeights<T>(
   getKey: GetKey<T>,
   onItemAdd?: (item: T) => void,
   onItemRemove?: (item: T) => void,
-): [(item: T, instance: HTMLElement) => void, () => void, CacheMap, number] {
+): [
+  setInstanceRef: (item: T, instance: HTMLElement) => void,
+  collectHeight: (sync?: boolean) => void,
+  cacheMap: CacheMap,
+  updatedMark: number,
+] {
   const [updatedMark, setUpdatedMark] = React.useState(0);
   const instanceRef = useRef(new Map<React.Key, HTMLElement>());
   const heightsRef = useRef(new CacheMap());
@@ -19,10 +24,10 @@ export default function useHeights<T>(
     raf.cancel(collectRafRef.current);
   }
 
-  function collectHeight() {
+  function collectHeight(sync = false) {
     cancelRaf();
 
-    collectRafRef.current = raf(() => {
+    const doCollect = () => {
       instanceRef.current.forEach((element, key) => {
         if (element && element.offsetParent) {
           const htmlElement = findDOMNode<HTMLElement>(element);
@@ -35,7 +40,13 @@ export default function useHeights<T>(
 
       // Always trigger update mark to tell parent that should re-calculate heights when resized
       setUpdatedMark((c) => c + 1);
-    });
+    };
+
+    if (sync) {
+      doCollect();
+    } else {
+      collectRafRef.current = raf(doCollect);
+    }
   }
 
   function setInstanceRef(item: T, instance: HTMLElement) {

src/hooks/useScrollTo.tsx

@@ -3,6 +3,10 @@ import * as React from 'react';
 import raf from 'rc-util/lib/raf';
 import type { GetKey } from '../interface';
 import type CacheMap from '../utils/CacheMap';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import { warning } from 'rc-util';
+
+const MAX_TIMES = 10;
 
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
 
@@ -35,6 +39,118 @@ export default function useScrollTo<T>(
 ): (arg: number | ScrollTarget) => void {
   const scrollRef = React.useRef<number>();
 
+  const [syncState, setSyncState] = React.useState<{
+    times: number;
+    index: number;
+    offset: number;
+    originAlign: ScrollAlign;
+    targetAlign?: 'top' | 'bottom';
+  }>(null);
+
+  // ========================== Sync Scroll ==========================
+  useLayoutEffect(() => {
+    if (syncState && syncState.times < MAX_TIMES) {
+      // Never reach
+      if (!containerRef.current) {
+        setSyncState((ori) => ({ ...ori }));
+        return;
+      }
+
+      collectHeight();
+
+      const { targetAlign, originAlign, index, offset } = syncState;
+
+      const height = containerRef.current.clientHeight;
+      let needCollectHeight = false;
+      let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
+
+      // Go to next frame if height not exist
+      if (height) {
+        const mergedAlign = targetAlign || originAlign;
+
+        // Get top & bottom
+        let stackTop = 0;
+        let itemTop = 0;
+        let itemBottom = 0;
+
+        const maxLen = Math.min(data.length, index);
+
+        for (let i = 0; i <= maxLen; i += 1) {
+          const key = getKey(data[i]);
+          itemTop = stackTop;
+          const cacheHeight = heights.get(key);
+          itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
+
+          stackTop = itemBottom;
+        }
+
+        // Check if need sync height (visible range has item not record height)
+        let leftHeight = mergedAlign === 'top' ? offset : height - offset;
+        for (let i = maxLen; i >= 0; i -= 1) {
+          const key = getKey(data[i]);
+          const cacheHeight = heights.get(key);
+
+          if (cacheHeight === undefined) {
+            needCollectHeight = true;
+            break;
+          }
+
+          leftHeight -= cacheHeight;
+          if (leftHeight <= 0) {
+            break;
+          }
+        }
+
+        // Scroll to
+        let targetTop: number | null = null;
+        let inView = false;
+
+        switch (mergedAlign) {
+          case 'top':
+            targetTop = itemTop - offset;
+            break;
+          case 'bottom':
+            targetTop = itemBottom - height + offset;
+            break;
+
+          default: {
+            const { scrollTop } = containerRef.current;
+            const scrollBottom = scrollTop + height;
+            if (itemTop < scrollTop) {
+              newTargetAlign = 'top';
+            } else if (itemBottom > scrollBottom) {
+              newTargetAlign = 'bottom';
+            } else {
+              // No need to collect since already in view
+              inView = true;
+            }
+          }
+        }
+
+        if (targetTop !== null) {
+          syncScrollTop(targetTop);
+        } else if (!inView) {
+          needCollectHeight = true;
+        }
+      }
+
+      // Trigger next effect
+      if (needCollectHeight) {
+        setSyncState((ori) => ({
+          ...ori,
+          times: ori.times + 1,
+          targetAlign: newTargetAlign,
+        }));
+      }
+    } else if (process.env.NODE_ENV !== 'production' && syncState?.times === MAX_TIMES) {
+      warning(
+        false,
+        'Seems `scrollTo` with `rc-virtual-list` reach toe max limitation. Please fire issue for us. Thanks.',
+      );
+    }
+  }, [syncState, containerRef.current]);
+
+  // =========================== Scroll To ===========================
   return (arg) => {
     // When not argument provided, we think dev may want to show the scrollbar
     if (arg === null || arg === undefined) {
@@ -59,75 +175,12 @@ export default function useScrollTo<T>(
 
       const { offset = 0 } = arg;
 
-      // We will retry 3 times in case dynamic height shaking
-      const syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
-        if (times < 0 || !containerRef.current) return;
-
-        const height = containerRef.current.clientHeight;
-        let needCollectHeight = false;
-        let newTargetAlign: 'top' | 'bottom' | null = targetAlign;
-
-        // Go to next frame if height not exist
-        if (height) {
-          const mergedAlign = targetAlign || align;
-
-          // Get top & bottom
-          let stackTop = 0;
-          let itemTop = 0;
-          let itemBottom = 0;
-
-          const maxLen = Math.min(data.length, index);
-
-          for (let i = 0; i <= maxLen; i += 1) {
-            const key = getKey(data[i]);
-            itemTop = stackTop;
-            const cacheHeight = heights.get(key);
-            itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
-
-            stackTop = itemBottom;
-
-            if (i === index && cacheHeight === undefined) {
-              needCollectHeight = true;
-            }
-          }
-
-          // Scroll to
-          let targetTop: number | null = null;
-
-          switch (mergedAlign) {
-            case 'top':
-              targetTop = itemTop - offset;
-              break;
-            case 'bottom':
-              targetTop = itemBottom - height + offset;
-              break;
-
-            default: {
-              const { scrollTop } = containerRef.current;
-              const scrollBottom = scrollTop + height;
-              if (itemTop < scrollTop) {
-                newTargetAlign = 'top';
-              } else if (itemBottom > scrollBottom) {
-                newTargetAlign = 'bottom';
-              }
-            }
-          }
-
-          if (targetTop !== null && targetTop !== containerRef.current.scrollTop) {
-            syncScrollTop(targetTop);
-          }
-        }
-
-        // We will retry since element may not sync height as it described
-        scrollRef.current = raf(() => {
-          if (needCollectHeight) {
-            collectHeight();
-          }
-          syncScroll(times - 1, newTargetAlign);
-        }, 2); // Delay 2 to wait for List collect heights
-      };
-
-      syncScroll(3);
+      setSyncState({
+        times: 0,
+        index,
+        offset,
+        originAlign: align,
+      });
     }
   };
 }