@legendapp/list 3.3.1 → 3.3.2

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.3.2
+
+- Perf: Recycled rows update their current item without changing the container context, so recycling hooks avoid extra rerenders during scroll.
+- Perf: Internal signal hooks recreate subscriptions less often
+
 ## 3.3.1
 
 - Perf: Animated `scrollToIndex` and `scrollToOffset` calls now mount the destination rows before native scrolling starts, so long programmatic jumps are less likely to show blank space at the target.

package/animated.d.ts

@@ -8,7 +8,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -48,6 +48,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -57,6 +59,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;

package/keyboard-legacy.d.ts

@@ -9,7 +9,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -49,6 +49,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -58,6 +60,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;

package/keyboard.d.ts

@@ -10,7 +10,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -50,6 +50,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -59,6 +61,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.d.ts

@@ -8,7 +8,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -48,6 +48,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -57,6 +59,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;

package/react-native.js

@@ -138,6 +138,7 @@ var createAnimatedValue = (value) => new ReactNative.Animated.Value(value);
 
 // src/state/state.tsx
 var ContextState = React2__namespace.createContext(null);
+var SIGNAL_NAMES_SEPARATOR = "\0";
 var contextNum = 0;
 function StateProvider({ children }) {
   const [value] = React2__namespace.useState(() => ({
@@ -209,6 +210,12 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
+function getSignalNamesKey(signalNames) {
+  return signalNames.length === 1 ? signalNames[0] : signalNames.join(SIGNAL_NAMES_SEPARATOR);
+}
+function getSignalNamesFromKey(signalNamesKey) {
+  return signalNamesKey.split(SIGNAL_NAMES_SEPARATOR);
+}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -256,7 +263,11 @@ function notifyPosition$(ctx, key, value) {
 }
 function useArr$(signalNames) {
   const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const signalNamesKey = getSignalNamesKey(signalNames);
+  const { subscribe, get } = React2__namespace.useMemo(
+    () => createSelectorFunctionsArr(ctx, getSignalNamesFromKey(signalNamesKey)),
+    [ctx, signalNamesKey]
+  );
   const value = shim.useSyncExternalStore(subscribe, get, get);
   return value;
 }
@@ -608,9 +619,22 @@ function findContainerId(ctx, key) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React2.createContext(null);
+var NO_CONTAINER_ID = -1;
 function useContextContainer() {
   return React2.useContext(ContextContainer);
 }
+function useContainerItemInfo(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemInfo] = useArr$([`containerItemInfo${containerId}`]);
+  return containerContext ? itemInfo : void 0;
+}
+function useContainerItemKey(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemKey] = useArr$([`containerItemKey${containerId}`]);
+  return containerContext ? itemKey : void 0;
+}
 function useAdaptiveRender() {
   const [mode] = useArr$(["adaptiveRender"]);
   return mode;
@@ -681,40 +705,35 @@ function useViewabilityAmount(callback) {
 }
 function useRecyclingEffect(effect) {
   const containerContext = useContextContainer();
-  const prevValues = React2.useRef({
-    prevIndex: void 0,
-    prevItem: void 0
-  });
+  const itemInfo = useContainerItemInfo(containerContext);
+  const prevInfo = React2.useRef(void 0);
   React2.useEffect(() => {
-    if (!containerContext) {
+    if (!itemInfo) {
       return;
     }
-    const { index, value } = containerContext;
     let ret;
-    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+    if (prevInfo.current) {
       ret = effect({
-        index,
-        item: value,
-        prevIndex: prevValues.current.prevIndex,
-        prevItem: prevValues.current.prevItem
+        index: itemInfo.index,
+        item: itemInfo.value,
+        prevIndex: prevInfo.current.index,
+        prevItem: prevInfo.current.value
       });
     }
-    prevValues.current = {
-      prevIndex: index,
-      prevItem: value
-    };
+    prevInfo.current = itemInfo;
     return ret;
-  }, [effect, containerContext]);
+  }, [effect, itemInfo]);
 }
 function useRecyclingState(valueOrFun) {
-  var _a3, _b;
+  var _a3;
   const containerContext = useContextContainer();
-  const computeValue = (ctx) => {
+  const itemInfo = useContainerItemInfo(containerContext);
+  const computeValue = (info) => {
     if (isFunction(valueOrFun)) {
       const initializer = valueOrFun;
-      return ctx ? initializer({
-        index: ctx.index,
-        item: ctx.value,
+      return info ? initializer({
+        index: info.index,
+        item: info.value,
         prevIndex: void 0,
         prevItem: void 0
       }) : initializer();
@@ -722,13 +741,12 @@ function useRecyclingState(valueOrFun) {
     return valueOrFun;
   };
   const [stateValue, setStateValue] = React2.useState(() => {
-    return computeValue(containerContext);
+    return computeValue(itemInfo);
   });
-  const prevItemKeyRef = React2.useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
-  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
-  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
-    prevItemKeyRef.current = currentItemKey;
-    setStateValue(computeValue(containerContext));
+  const prevItemKeyRef = React2.useRef((_a3 = itemInfo == null ? void 0 : itemInfo.itemKey) != null ? _a3 : null);
+  if (itemInfo && prevItemKeyRef.current !== itemInfo.itemKey) {
+    prevItemKeyRef.current = itemInfo.itemKey;
+    setStateValue(computeValue(itemInfo));
   }
   const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = React2.useCallback(
@@ -747,12 +765,10 @@ function useRecyclingState(valueOrFun) {
 }
 function useIsLastItem() {
   const containerContext = useContextContainer();
+  const itemKey = useContainerItemKey(containerContext);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
-    if (containerContext) {
-      const { itemKey } = containerContext;
-      if (!isNullOrUndefined(itemKey)) {
-        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
-      }
+    if (containerContext && !isNullOrUndefined(itemKey)) {
+      return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
     }
     return false;
   });
@@ -766,12 +782,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   const containerContext = useContextContainer();
-  if (IsNewArchitecture && containerContext) {
-    const { triggerLayout: syncLayout } = containerContext;
-    return syncLayout;
-  } else {
-    return noop;
-  }
+  return IsNewArchitecture && containerContext ? containerContext.triggerLayout : noop;
 }
 
 // src/components/Separator.tsx
@@ -3407,22 +3418,28 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerSpan${containerIndex}`, span);
     }
   }
+  const prevItemInfo = peek$(ctx, `containerItemInfo${containerIndex}`);
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
+  let itemInfoValue = prevData;
+  let didChangeItemInfo = (prevItemInfo == null ? void 0 : prevItemInfo.itemKey) !== itemKey || (prevItemInfo == null ? void 0 : prevItemInfo.index) !== itemIndex || (prevItemInfo == null ? void 0 : prevItemInfo.value) !== prevData;
+  const updateData = () => {
+    set$(ctx, `containerItemData${containerIndex}`, item);
+    itemInfoValue = item;
+    didChangeItemInfo = true;
+    didRefreshData = true;
+  };
   if (prevData !== item) {
     const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
     const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
-      set$(ctx, `containerItemData${containerIndex}`, item);
-      didRefreshData = true;
+      updateData();
     } else if (cachedComparison !== 1) {
       const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
       if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else if (!itemsAreEqual) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else {
         const isEqual = itemsAreEqual(prevData, item, itemIndex, data);
         if (!state.pendingDataComparison || state.pendingDataComparison.previousData !== state.previousData || state.pendingDataComparison.nextData !== data) {
@@ -3438,12 +3455,18 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
-          set$(ctx, `containerItemData${containerIndex}`, item);
-          didRefreshData = true;
+          updateData();
         }
       }
     }
   }
+  if (didChangeItemInfo) {
+    set$(ctx, `containerItemInfo${containerIndex}`, {
+      index: itemIndex,
+      itemKey,
+      value: itemInfoValue
+    });
+  }
   return { didChangePosition, didRefreshData };
 }
 
@@ -4689,6 +4712,11 @@ function calculateItemsInView(ctx, params = {}) {
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          set$(ctx, `containerItemInfo${containerIndex}`, {
+            index: i,
+            itemKey: id,
+            value: data[i]
+          });
           if (allocation.itemType !== void 0) {
             state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
@@ -4755,6 +4783,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
+        set$(ctx, `containerItemInfo${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
         set$(ctx, `containerSpan${i}`, 1);
@@ -5324,12 +5353,9 @@ var Container = typedMemo(function Container2({
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
-      index,
-      itemKey,
-      triggerLayout,
-      value: data
+      triggerLayout
     };
-  }, [id, itemKey, index, data, triggerLayout]);
+  }, [id, triggerLayout]);
   React2.useLayoutEffect(() => {
     ctx.containerLayoutTriggers.set(id, triggerLayout);
     return () => {

package/react-native.mjs

@@ -117,6 +117,7 @@ var createAnimatedValue = (value) => new Animated.Value(value);
 
 // src/state/state.tsx
 var ContextState = React2.createContext(null);
+var SIGNAL_NAMES_SEPARATOR = "\0";
 var contextNum = 0;
 function StateProvider({ children }) {
   const [value] = React2.useState(() => ({
@@ -188,6 +189,12 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
+function getSignalNamesKey(signalNames) {
+  return signalNames.length === 1 ? signalNames[0] : signalNames.join(SIGNAL_NAMES_SEPARATOR);
+}
+function getSignalNamesFromKey(signalNamesKey) {
+  return signalNamesKey.split(SIGNAL_NAMES_SEPARATOR);
+}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -235,7 +242,11 @@ function notifyPosition$(ctx, key, value) {
 }
 function useArr$(signalNames) {
   const ctx = React2.useContext(ContextState);
-  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const signalNamesKey = getSignalNamesKey(signalNames);
+  const { subscribe, get } = React2.useMemo(
+    () => createSelectorFunctionsArr(ctx, getSignalNamesFromKey(signalNamesKey)),
+    [ctx, signalNamesKey]
+  );
   const value = useSyncExternalStore(subscribe, get, get);
   return value;
 }
@@ -587,9 +598,22 @@ function findContainerId(ctx, key) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+var NO_CONTAINER_ID = -1;
 function useContextContainer() {
   return useContext(ContextContainer);
 }
+function useContainerItemInfo(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemInfo] = useArr$([`containerItemInfo${containerId}`]);
+  return containerContext ? itemInfo : void 0;
+}
+function useContainerItemKey(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemKey] = useArr$([`containerItemKey${containerId}`]);
+  return containerContext ? itemKey : void 0;
+}
 function useAdaptiveRender() {
   const [mode] = useArr$(["adaptiveRender"]);
   return mode;
@@ -660,40 +684,35 @@ function useViewabilityAmount(callback) {
 }
 function useRecyclingEffect(effect) {
   const containerContext = useContextContainer();
-  const prevValues = useRef({
-    prevIndex: void 0,
-    prevItem: void 0
-  });
+  const itemInfo = useContainerItemInfo(containerContext);
+  const prevInfo = useRef(void 0);
   useEffect(() => {
-    if (!containerContext) {
+    if (!itemInfo) {
       return;
     }
-    const { index, value } = containerContext;
     let ret;
-    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+    if (prevInfo.current) {
       ret = effect({
-        index,
-        item: value,
-        prevIndex: prevValues.current.prevIndex,
-        prevItem: prevValues.current.prevItem
+        index: itemInfo.index,
+        item: itemInfo.value,
+        prevIndex: prevInfo.current.index,
+        prevItem: prevInfo.current.value
       });
     }
-    prevValues.current = {
-      prevIndex: index,
-      prevItem: value
-    };
+    prevInfo.current = itemInfo;
     return ret;
-  }, [effect, containerContext]);
+  }, [effect, itemInfo]);
 }
 function useRecyclingState(valueOrFun) {
-  var _a3, _b;
+  var _a3;
   const containerContext = useContextContainer();
-  const computeValue = (ctx) => {
+  const itemInfo = useContainerItemInfo(containerContext);
+  const computeValue = (info) => {
     if (isFunction(valueOrFun)) {
       const initializer = valueOrFun;
-      return ctx ? initializer({
-        index: ctx.index,
-        item: ctx.value,
+      return info ? initializer({
+        index: info.index,
+        item: info.value,
         prevIndex: void 0,
         prevItem: void 0
       }) : initializer();
@@ -701,13 +720,12 @@ function useRecyclingState(valueOrFun) {
     return valueOrFun;
   };
   const [stateValue, setStateValue] = useState(() => {
-    return computeValue(containerContext);
+    return computeValue(itemInfo);
   });
-  const prevItemKeyRef = useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
-  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
-  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
-    prevItemKeyRef.current = currentItemKey;
-    setStateValue(computeValue(containerContext));
+  const prevItemKeyRef = useRef((_a3 = itemInfo == null ? void 0 : itemInfo.itemKey) != null ? _a3 : null);
+  if (itemInfo && prevItemKeyRef.current !== itemInfo.itemKey) {
+    prevItemKeyRef.current = itemInfo.itemKey;
+    setStateValue(computeValue(itemInfo));
   }
   const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
@@ -726,12 +744,10 @@ function useRecyclingState(valueOrFun) {
 }
 function useIsLastItem() {
   const containerContext = useContextContainer();
+  const itemKey = useContainerItemKey(containerContext);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
-    if (containerContext) {
-      const { itemKey } = containerContext;
-      if (!isNullOrUndefined(itemKey)) {
-        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
-      }
+    if (containerContext && !isNullOrUndefined(itemKey)) {
+      return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
     }
     return false;
   });
@@ -745,12 +761,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   const containerContext = useContextContainer();
-  if (IsNewArchitecture && containerContext) {
-    const { triggerLayout: syncLayout } = containerContext;
-    return syncLayout;
-  } else {
-    return noop;
-  }
+  return IsNewArchitecture && containerContext ? containerContext.triggerLayout : noop;
 }
 
 // src/components/Separator.tsx
@@ -3386,22 +3397,28 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerSpan${containerIndex}`, span);
     }
   }
+  const prevItemInfo = peek$(ctx, `containerItemInfo${containerIndex}`);
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
+  let itemInfoValue = prevData;
+  let didChangeItemInfo = (prevItemInfo == null ? void 0 : prevItemInfo.itemKey) !== itemKey || (prevItemInfo == null ? void 0 : prevItemInfo.index) !== itemIndex || (prevItemInfo == null ? void 0 : prevItemInfo.value) !== prevData;
+  const updateData = () => {
+    set$(ctx, `containerItemData${containerIndex}`, item);
+    itemInfoValue = item;
+    didChangeItemInfo = true;
+    didRefreshData = true;
+  };
   if (prevData !== item) {
     const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
     const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
-      set$(ctx, `containerItemData${containerIndex}`, item);
-      didRefreshData = true;
+      updateData();
     } else if (cachedComparison !== 1) {
       const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
       if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else if (!itemsAreEqual) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else {
         const isEqual = itemsAreEqual(prevData, item, itemIndex, data);
         if (!state.pendingDataComparison || state.pendingDataComparison.previousData !== state.previousData || state.pendingDataComparison.nextData !== data) {
@@ -3417,12 +3434,18 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
-          set$(ctx, `containerItemData${containerIndex}`, item);
-          didRefreshData = true;
+          updateData();
         }
       }
     }
   }
+  if (didChangeItemInfo) {
+    set$(ctx, `containerItemInfo${containerIndex}`, {
+      index: itemIndex,
+      itemKey,
+      value: itemInfoValue
+    });
+  }
   return { didChangePosition, didRefreshData };
 }
 
@@ -4668,6 +4691,11 @@ function calculateItemsInView(ctx, params = {}) {
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          set$(ctx, `containerItemInfo${containerIndex}`, {
+            index: i,
+            itemKey: id,
+            value: data[i]
+          });
           if (allocation.itemType !== void 0) {
             state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
@@ -4734,6 +4762,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
+        set$(ctx, `containerItemInfo${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
         set$(ctx, `containerSpan${i}`, 1);
@@ -5303,12 +5332,9 @@ var Container = typedMemo(function Container2({
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
-      index,
-      itemKey,
-      triggerLayout,
-      value: data
+      triggerLayout
     };
-  }, [id, itemKey, index, data, triggerLayout]);
+  }, [id, triggerLayout]);
   useLayoutEffect(() => {
     ctx.containerLayoutTriggers.set(id, triggerLayout);
     return () => {