@legendapp/list 2.1.0-beta.5 → 2.1.0-beta.7

package/index.mjs

@@ -421,6 +421,10 @@ function getGlobalResizeObserver() {
 }
 var callbackMap = /* @__PURE__ */ new WeakMap();
 function createResizeObserver(element, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    return () => {
+    };
+  }
   if (!element) {
     return () => {
     };
@@ -456,7 +460,7 @@ function useOnLayoutSync({
     const current = ref.current;
     const scrollableNode = (_b = (_a3 = current == null ? void 0 : current.getScrollableNode) == null ? void 0 : _a3.call(current)) != null ? _b : null;
     const element = scrollableNode || current;
-    if (!element || !(element instanceof HTMLElement)) {
+    if (!element) {
       return;
     }
     const emit = (layout, fromLayoutEffect) => {
@@ -478,6 +482,9 @@ function useOnLayoutSync({
   return {};
 }
 function toLayout(rect) {
+  if (!rect) {
+    return { height: 0, width: 0, x: 0, y: 0 };
+  }
   return {
     height: rect.height,
     width: rect.width,
@@ -1168,6 +1175,114 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
+// src/core/checkActualChange.ts
+function checkActualChange(state, dataProp, previousData) {
+  if (!previousData || !dataProp || dataProp.length !== previousData.length) {
+    return true;
+  }
+  const {
+    idCache,
+    props: { keyExtractor }
+  } = state;
+  for (let i = 0; i < dataProp.length; i++) {
+    if (dataProp[i] !== previousData[i]) {
+      return true;
+    }
+    if (keyExtractor ? idCache[i] !== keyExtractor(previousData[i], i) : dataProp[i] !== previousData[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/utils/setPaddingTop.ts
+function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
+  if (stylePaddingTop !== void 0) {
+    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
+    if (stylePaddingTop < prevStylePaddingTop) {
+      let prevTotalSize = peek$(ctx, "totalSize") || 0;
+      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
+      state.timeoutSetPaddingTop = setTimeout(() => {
+        prevTotalSize = peek$(ctx, "totalSize") || 0;
+        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
+      }, 16);
+    }
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  }
+  if (alignItemsPaddingTop !== void 0) {
+    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+  }
+}
+
+// src/utils/updateAlignItemsPaddingTop.ts
+function updateAlignItemsPaddingTop(ctx, state) {
+  const {
+    scrollLength,
+    props: { alignItemsAtEnd, data }
+  } = state;
+  if (alignItemsAtEnd) {
+    let alignItemsPaddingTop = 0;
+    if ((data == null ? void 0 : data.length) > 0) {
+      const contentSize = getContentSize(ctx);
+      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+    }
+    setPaddingTop(ctx, state, { alignItemsPaddingTop });
+  }
+}
+
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+function addTotalSize(ctx, state, key, add) {
+  const { alignItemsAtEnd } = state.props;
+  const prevTotalSize = state.totalSize;
+  if (key === null) {
+    state.totalSize = add;
+    if (state.timeoutSetPaddingTop) {
+      clearTimeout(state.timeoutSetPaddingTop);
+      state.timeoutSetPaddingTop = void 0;
+    }
+  } else {
+    state.totalSize += add;
+  }
+  if (prevTotalSize !== state.totalSize) {
+    set$(ctx, "totalSize", state.totalSize);
+    if (alignItemsAtEnd) {
+      updateAlignItemsPaddingTop(ctx, state);
+    }
+  }
+}
+
+// src/core/setSize.ts
+function setSize(ctx, state, itemKey, size) {
+  const { sizes } = state;
+  const previousSize = sizes.get(itemKey);
+  const diff = previousSize !== void 0 ? size - previousSize : size;
+  if (diff !== 0) {
+    addTotalSize(ctx, state, itemKey, diff);
+  }
+  sizes.set(itemKey, size);
+}
+
 // src/utils/getItemSize.ts
 function getItemSize(ctx, state, key, index, data, useAverageSize) {
   var _a3, _b;
@@ -1205,7 +1320,7 @@ function getItemSize(ctx, state, key, index, data, useAverageSize) {
   if (size === void 0) {
     size = getEstimatedItemSize ? getEstimatedItemSize(index, data, itemType) : estimatedItemSize;
   }
-  sizes.set(key, size);
+  setSize(ctx, state, key, size);
   return size;
 }
 
@@ -1393,10 +1508,15 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
 
 // src/core/finishScrollTo.ts
 function finishScrollTo(ctx, state) {
+  var _a3;
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
+    state.isOptimizingItemPositions = false;
     set$(ctx, "scrollingTo", void 0);
+    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
+      calculateItemsInView(ctx, state, { forceFullItemPositions: true });
+    }
   }
 }
 
@@ -1409,7 +1529,11 @@ function scrollTo(ctx, state, params) {
     refScroller,
     props: { horizontal }
   } = state;
-  const offset = calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
+  let offset = calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
+  if (Number.isFinite(state.scrollLength) && Number.isFinite(state.totalSize)) {
+    const maxOffset = Math.max(0, state.totalSize - state.scrollLength);
+    offset = Math.min(offset, maxOffset);
+  }
   state.scrollHistory.length = 0;
   if (!noScrollingTo) {
     set$(ctx, "scrollingTo", scrollTarget);
@@ -1580,82 +1704,43 @@ function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   return maxSize;
 }
 
-// src/utils/setPaddingTop.ts
-function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
-  if (stylePaddingTop !== void 0) {
-    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-    if (stylePaddingTop < prevStylePaddingTop) {
-      let prevTotalSize = peek$(ctx, "totalSize") || 0;
-      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
-      state.timeoutSetPaddingTop = setTimeout(() => {
-        prevTotalSize = peek$(ctx, "totalSize") || 0;
-        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
-      }, 16);
-    }
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
-  }
-  if (alignItemsPaddingTop !== void 0) {
-    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
-  }
-}
-
-// src/utils/updateAlignItemsPaddingTop.ts
-function updateAlignItemsPaddingTop(ctx, state) {
-  const {
-    scrollLength,
-    props: { alignItemsAtEnd, data }
-  } = state;
-  if (alignItemsAtEnd) {
-    let alignItemsPaddingTop = 0;
-    if ((data == null ? void 0 : data.length) > 0) {
-      const contentSize = getContentSize(ctx);
-      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
-    }
-    setPaddingTop(ctx, state, { alignItemsPaddingTop });
-  }
-}
-
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
+// src/utils/getScrollVelocity.ts
+var getScrollVelocity = (state) => {
+  const { scrollHistory } = state;
+  let velocity = 0;
+  if (scrollHistory.length >= 1) {
+    const newest = scrollHistory[scrollHistory.length - 1];
+    let oldest;
+    let start = 0;
+    const now = Date.now();
+    for (let i = 0; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      const nextEntry = scrollHistory[i + 1];
+      if (i > 0) {
+        const prevEntry = scrollHistory[i - 1];
+        const prevDirection = entry.scroll - prevEntry.scroll;
+        const currentDirection = nextEntry.scroll - entry.scroll;
+        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
+          start = i;
+          break;
         }
       }
     }
-  }
-}
-function addTotalSize(ctx, state, key, add) {
-  const { alignItemsAtEnd } = state.props;
-  const prevTotalSize = state.totalSize;
-  if (key === null) {
-    state.totalSize = add;
-    if (state.timeoutSetPaddingTop) {
-      clearTimeout(state.timeoutSetPaddingTop);
-      state.timeoutSetPaddingTop = void 0;
+    for (let i = start; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      if (now - entry.time <= 1e3) {
+        oldest = entry;
+        break;
+      }
     }
-  } else {
-    state.totalSize += add;
-  }
-  if (prevTotalSize !== state.totalSize) {
-    set$(ctx, "totalSize", state.totalSize);
-    if (alignItemsAtEnd) {
-      updateAlignItemsPaddingTop(ctx, state);
+    if (oldest && oldest !== newest) {
+      const scrollDiff = newest.scroll - oldest.scroll;
+      const timeDiff = newest.time - oldest.time;
+      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
     }
   }
-}
+  return velocity;
+};
 
 // src/utils/updateSnapToOffsets.ts
 function updateSnapToOffsets(ctx, state) {
@@ -1673,7 +1758,11 @@ function updateSnapToOffsets(ctx, state) {
 }
 
 // src/core/updateItemPositions.ts
-function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered } = { scrollBottomBuffered: -1, startIndex: 0 }) {
+function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered, forceFullUpdate = false } = {
+  forceFullUpdate: false,
+  scrollBottomBuffered: -1,
+  startIndex: 0
+}) {
   var _a3, _b, _c, _d;
   const {
     columns,
@@ -1689,6 +1778,8 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const scrollingTo = peek$(ctx, "scrollingTo");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
+  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  state.isOptimizingItemPositions = shouldOptimize;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
   let currentRowTop = 0;
@@ -1716,11 +1807,11 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   let didBreakEarly = false;
   let breakAt;
   for (let i = startIndex; i < dataLength; i++) {
-    if (breakAt && i > breakAt) {
+    if (shouldOptimize && breakAt !== void 0 && i > breakAt) {
       didBreakEarly = true;
       break;
     }
-    if (breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
+    if (shouldOptimize && breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
@@ -2098,44 +2189,6 @@ function comparatorByDistance(a, b) {
   return b.distance - a.distance;
 }
 
-// src/utils/getScrollVelocity.ts
-var getScrollVelocity = (state) => {
-  const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    const now = Date.now();
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (now - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
-    }
-    if (oldest && oldest !== newest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-    }
-  }
-  return velocity;
-};
-
 // src/core/scrollToIndex.ts
 function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
   if (index >= state.props.data.length) {
@@ -2255,14 +2308,15 @@ function calculateItemsInView(ctx, state, params = {}) {
       enableScrollForNextCalculateItemsInView,
       idCache,
       indexByKey,
+      initialScroll,
       minIndexSizeChanged,
       positions,
+      props: { getItemType, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer },
       scrollForNextCalculateItemsInView,
       scrollLength,
       sizes,
       startBufferedId: startBufferedIdOrig,
-      viewabilityConfigCallbackPairs,
-      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer }
+      viewabilityConfigCallbackPairs
     } = state;
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
@@ -2274,7 +2328,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const totalSize = peek$(ctx, "totalSize");
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
-    const { dataChanged, doMVCP } = params;
+    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
     const { queuedInitialLayout } = state;
@@ -2328,7 +2382,11 @@ function calculateItemsInView(ctx, state, params = {}) {
       positions.clear();
     }
     const startIndex = dataChanged ? 0 : (_b = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _b : 0;
-    updateItemPositions(ctx, state, dataChanged, { scrollBottomBuffered, startIndex });
+    updateItemPositions(ctx, state, dataChanged, {
+      forceFullUpdate: !!forceFullItemPositions,
+      scrollBottomBuffered,
+      startIndex
+    });
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
     }
@@ -2651,25 +2709,23 @@ function updateAveragesOnDataChange(state, oldData, newData) {
 }
 
 // src/core/checkResetContainers.ts
-function checkResetContainers(ctx, state, isFirst, dataProp) {
-  if (state) {
-    if (!isFirst && state.props.data !== dataProp) {
-      updateAveragesOnDataChange(state, state.props.data, dataProp);
-    }
-    const { maintainScrollAtEnd } = state.props;
-    if (!isFirst) {
-      calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
-      const shouldMaintainScrollAtEnd = maintainScrollAtEnd === true || maintainScrollAtEnd.onDataChange;
-      const didMaintainScrollAtEnd = shouldMaintainScrollAtEnd && doMaintainScrollAtEnd(ctx, state, false);
-      if (!didMaintainScrollAtEnd && dataProp.length > state.props.data.length) {
-        state.isEndReached = false;
-      }
-      if (!didMaintainScrollAtEnd) {
-        checkAtTop(state);
-        checkAtBottom(ctx, state);
-      }
-    }
+function checkResetContainers(ctx, state, dataProp) {
+  const { previousData } = state;
+  if (previousData) {
+    updateAveragesOnDataChange(state, previousData, dataProp);
+  }
+  const { maintainScrollAtEnd } = state.props;
+  calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
+  const shouldMaintainScrollAtEnd = maintainScrollAtEnd === true || maintainScrollAtEnd.onDataChange;
+  const didMaintainScrollAtEnd = shouldMaintainScrollAtEnd && doMaintainScrollAtEnd(ctx, state, false);
+  if (!didMaintainScrollAtEnd && previousData && dataProp.length > previousData.length) {
+    state.isEndReached = false;
   }
+  if (!didMaintainScrollAtEnd) {
+    checkAtTop(state);
+    checkAtBottom(ctx, state);
+  }
+  delete state.previousData;
 }
 
 // src/core/doInitialAllocateContainers.ts
@@ -2710,7 +2766,7 @@ function doInitialAllocateContainers(ctx, state) {
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
     if (state.lastLayout) {
-      if (state.props.initialScroll) {
+      if (state.initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
@@ -2876,7 +2932,6 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
       shouldMaintainScrollAtEnd = true;
     }
-    addTotalSize(ctx, state, itemKey, diff);
     onItemSizeChanged == null ? void 0 : onItemSizeChanged({
       index,
       itemData: state.props.data[index],
@@ -2941,7 +2996,7 @@ function updateOneItemSize(ctx, state, itemKey, sizeObj) {
     averages.num++;
   }
   if (!prevSize || Math.abs(prevSize - size) > 0.1) {
-    sizes.set(itemKey, size);
+    setSize(ctx, state, itemKey, size);
     return size - prevSize;
   }
   return 0;
@@ -3096,6 +3151,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     getItemType,
     horizontal,
     initialContainerPoolRatio = 2,
+    initialScrollAtEnd = false,
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     itemsAreEqual,
@@ -3135,7 +3191,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ...rest
   } = props;
   const [renderNum, setRenderNum] = useState(0);
-  const initialScrollProp = initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
+  const initialScrollProp = initialScrollAtEnd ? { index: dataProp.length - 1, viewOffset: 0 } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
   const [canRender, setCanRender] = React3.useState(!IsNewArchitecture);
   const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
   const style = { ...StyleSheet.flatten(styleProp) };
@@ -3159,6 +3215,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         containerItemKeys: /* @__PURE__ */ new Set(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         dataChangeNeedsScrollUpdate: false,
+        didColumnsChange: false,
+        didDataChange: false,
         enableScrollForNextCalculateItemsInView: true,
         endBuffered: -1,
         endNoBuffer: -1,
@@ -3171,6 +3229,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isAtEnd: false,
         isAtStart: false,
         isEndReached: false,
+        isFirst: true,
+        isOptimizingItemPositions: false,
         isStartReached: false,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
@@ -3209,10 +3269,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.internalState;
   }
   const state = refState.current;
-  const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
-  if (didDataChange) {
+  const isFirstLocal = state.isFirst;
+  state.didColumnsChange = numColumnsProp !== state.props.numColumns;
+  const didDataChangeLocal = state.props.data !== dataProp && checkActualChange(state, dataProp, state.props.data);
+  if (didDataChangeLocal) {
     state.dataChangeNeedsScrollUpdate = true;
+    state.didDataChange = true;
+    state.previousData = state.props.data;
   }
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
   state.props = {
@@ -3271,7 +3334,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       requestAdjust(ctx, state, paddingDiff);
     }
   };
-  if (isFirst) {
+  if (isFirstLocal) {
     initializeStateVars();
     updateItemPositions(
       ctx,
@@ -3289,28 +3352,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         initialContentOffset2 += calculateOffsetForIndex(ctx, state, index);
       }
       refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
-      if (initialContentOffset2 > 0) {
-        scrollTo(ctx, state, {
-          animated: false,
-          index,
-          isInitialScroll: true,
-          offset: initialContentOffset2,
-          viewPosition: index === dataProp.length - 1 ? 1 : 0
-        });
-      }
       return initialContentOffset2;
     }
     return 0;
   }, [renderNum]);
-  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+  if (isFirstLocal || didDataChangeLocal || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
-    if (!keyExtractorProp && !isFirst && didDataChange) {
+    if (!keyExtractorProp && !isFirstLocal && didDataChangeLocal) {
       IS_DEV && warnDevOnce(
         "keyExtractor",
         "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
       );
       refState.current.sizes.clear();
       refState.current.positions.clear();
+      refState.current.totalSize = 0;
+      set$(ctx, "totalSize", 0);
     }
   }
   const onLayoutHeader = useCallback((rect, fromLayoutEffect) => {
@@ -3325,22 +3381,41 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
   }, []);
+  const doInitialScroll = useCallback(() => {
+    const initialScroll = state.initialScroll;
+    if (initialScroll) {
+      scrollTo(ctx, state, { animated: false, offset: initialContentOffset, ...state.initialScroll || {} });
+    }
+  }, [initialContentOffset, state.initialScroll]);
+  const onLayoutChange = useCallback((layout) => {
+    doInitialScroll();
+    handleLayout(ctx, state, layout, setCanRender);
+  }, []);
+  const { onLayout } = useOnLayoutSync({
+    onLayoutChange,
+    onLayoutProp,
+    ref: refScroller
+    // the type of ScrollView doesn't include measure?
+  });
   useLayoutEffect(() => {
     if (snapToIndices) {
       updateSnapToOffsets(ctx, state);
     }
   }, [snapToIndices]);
   useLayoutEffect(() => {
-    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainers(ctx, state);
-    if (!didAllocateContainers) {
-      checkResetContainers(
-        ctx,
-        state,
-        /*isFirst*/
-        isFirst,
-        dataProp
-      );
+    const {
+      didColumnsChange,
+      didDataChange,
+      isFirst,
+      props: { data }
+    } = state;
+    const didAllocateContainers = data.length > 0 && doInitialAllocateContainers(ctx, state);
+    if (!didAllocateContainers && !isFirst && (didDataChange || didColumnsChange)) {
+      checkResetContainers(ctx, state, data);
     }
+    state.didColumnsChange = false;
+    state.didDataChange = false;
+    state.isFirst = false;
   }, [dataProp, numColumnsProp]);
   useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
@@ -3360,15 +3435,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.viewabilityConfigCallbackPairs = viewability;
     state.enableScrollForNextCalculateItemsInView = !viewability;
   }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
-  const onLayoutChange = useCallback((layout) => {
-    handleLayout(ctx, state, layout, setCanRender);
-  }, []);
-  const { onLayout } = useOnLayoutSync({
-    onLayoutChange,
-    onLayoutProp,
-    ref: refScroller
-    // the type of ScrollView doesn't include measure?
-  });
   useImperativeHandle(forwardedRef, () => {
     const scrollIndexIntoView = (options) => {
       const state2 = refState.current;
@@ -3452,12 +3518,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     };
   }, []);
   {
-    useEffect(() => {
-      const { initialScroll } = refState.current;
-      if (initialContentOffset) {
-        scrollTo(ctx, state, { animated: false, offset: initialContentOffset, ...initialScroll || {} });
-      }
-    }, []);
+    useEffect(doInitialScroll, []);
   }
   const fns = useMemo(
     () => ({