@legendapp/list 3.0.0-beta.10 → 3.0.0-beta.11

package/index.d.mts

@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;

package/index.d.ts

@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;

package/index.js

@@ -367,48 +367,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React3.createContext(null);
+function useContextContainer() {
+  return React3.useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React3.useContext(ContextContainer);
-  const key = containerId + (configId != null ? configId : "");
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityCallbacks.set(key, callback);
-  React3.useEffect(
-    () => () => {
+  React3.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
+    ctx.mapViewabilityCallbacks.set(key, callback);
+    return () => {
       ctx.mapViewabilityCallbacks.delete(key);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, configId, containerContext]);
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React3.useContext(ContextContainer);
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React3.useEffect(
-    () => () => {
+  React3.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+    return () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, containerContext]);
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React3.useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = React3.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   React3.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -423,48 +445,73 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React3.useContext(ContextContainer);
-  const refState = React3.useRef({
-    itemKey: null,
-    value: null
+  var _a3, _b;
+  const containerContext = useContextContainer();
+  const computeValue = (ctx) => {
+    if (isFunction(valueOrFun)) {
+      const initializer = valueOrFun;
+      return ctx ? initializer({
+        index: ctx.index,
+        item: ctx.value,
+        prevIndex: void 0,
+        prevItem: void 0
+      }) : initializer();
+    }
+    return valueOrFun;
+  };
+  const [stateValue, setStateValue] = React3.useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = React3.useState(0);
-  const state = refState.current;
-  if (state.itemKey !== itemKey) {
-    state.itemKey = itemKey;
-    state.value = isFunction(valueOrFun) ? valueOrFun({
-      index,
-      item: value,
-      prevIndex: void 0,
-      prevItem: void 0
-    }) : valueOrFun;
+  const prevItemKeyRef = React3.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 triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = React3.useCallback(
     (newState) => {
-      state.value = isFunction(newState) ? newState(state.value) : newState;
-      setRenderNum((v) => v + 1);
+      if (!triggerLayout) {
+        return;
+      }
+      setStateValue((prevValue) => {
+        return isFunction(newState) ? newState(prevValue) : newState;
+      });
       triggerLayout();
     },
-    [triggerLayout, state]
+    [triggerLayout]
   );
-  return [state.value, setState];
+  return [stateValue, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = React3.useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
+var noop = () => {
+};
 function useSyncLayout() {
-  {
-    const { triggerLayout: syncLayout } = React3.useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
+  } else {
+    return noop;
   }
 }
 
@@ -1109,9 +1156,6 @@ function ScrollAdjust() {
         } else {
           scrollView.scrollBy(0, scrollDelta);
         }
-        if (IS_DEV) {
-          console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
-        }
       }
       lastScrollOffsetRef.current = scrollOffset;
     }

package/index.mjs

@@ -346,48 +346,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+function useContextContainer() {
+  return useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
-  const key = containerId + (configId != null ? configId : "");
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityCallbacks.set(key, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
+    ctx.mapViewabilityCallbacks.set(key, callback);
+    return () => {
       ctx.mapViewabilityCallbacks.delete(key);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, configId, containerContext]);
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+    return () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, containerContext]);
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -402,48 +424,73 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
-  const refState = useRef({
-    itemKey: null,
-    value: null
+  var _a3, _b;
+  const containerContext = useContextContainer();
+  const computeValue = (ctx) => {
+    if (isFunction(valueOrFun)) {
+      const initializer = valueOrFun;
+      return ctx ? initializer({
+        index: ctx.index,
+        item: ctx.value,
+        prevIndex: void 0,
+        prevItem: void 0
+      }) : initializer();
+    }
+    return valueOrFun;
+  };
+  const [stateValue, setStateValue] = useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = useState(0);
-  const state = refState.current;
-  if (state.itemKey !== itemKey) {
-    state.itemKey = itemKey;
-    state.value = isFunction(valueOrFun) ? valueOrFun({
-      index,
-      item: value,
-      prevIndex: void 0,
-      prevItem: void 0
-    }) : valueOrFun;
+  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 triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
     (newState) => {
-      state.value = isFunction(newState) ? newState(state.value) : newState;
-      setRenderNum((v) => v + 1);
+      if (!triggerLayout) {
+        return;
+      }
+      setStateValue((prevValue) => {
+        return isFunction(newState) ? newState(prevValue) : newState;
+      });
       triggerLayout();
     },
-    [triggerLayout, state]
+    [triggerLayout]
   );
-  return [state.value, setState];
+  return [stateValue, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
+var noop = () => {
+};
 function useSyncLayout() {
-  {
-    const { triggerLayout: syncLayout } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
+  } else {
+    return noop;
   }
 }
 
@@ -1088,9 +1135,6 @@ function ScrollAdjust() {
         } else {
           scrollView.scrollBy(0, scrollDelta);
         }
-        if (IS_DEV) {
-          console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
-        }
       }
       lastScrollOffsetRef.current = scrollOffset;
     }

package/index.native.d.mts

@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;

package/index.native.d.ts

@@ -12,7 +12,7 @@ declare const LegendList: (<T>(props: LegendListProps<T> & React.RefAttributes<L
 declare function useViewability<ItemT = any>(callback: ViewabilityCallback<ItemT>, configId?: string): void;
 declare function useViewabilityAmount<ItemT = any>(callback: ViewabilityAmountCallback<ItemT>): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT, Dispatch<SetStateAction<ItemT>>];
 declare function useIsLastItem(): boolean;
 declare function useListScrollSize(): {
     width: number;

package/index.native.js

@@ -411,48 +411,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React2.createContext(null);
+function useContextContainer() {
+  return React2.useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
-  const key = containerId + (configId != null ? configId : "");
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityCallbacks.set(key, callback);
-  React2.useEffect(
-    () => () => {
+  React2.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
+    ctx.mapViewabilityCallbacks.set(key, callback);
+    return () => {
       ctx.mapViewabilityCallbacks.delete(key);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, configId, containerContext]);
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React2.useEffect(
-    () => () => {
+  React2.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+    return () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, containerContext]);
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React2.useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = React2.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   React2.useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -467,38 +489,58 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React2.useContext(ContextContainer);
-  const refState = React2.useRef({
-    itemKey: null,
-    value: null
+  var _a3, _b;
+  const containerContext = useContextContainer();
+  const computeValue = (ctx) => {
+    if (isFunction(valueOrFun)) {
+      const initializer = valueOrFun;
+      return ctx ? initializer({
+        index: ctx.index,
+        item: ctx.value,
+        prevIndex: void 0,
+        prevItem: void 0
+      }) : initializer();
+    }
+    return valueOrFun;
+  };
+  const [stateValue, setStateValue] = React2.useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = React2.useState(0);
-  const state = refState.current;
-  if (state.itemKey !== itemKey) {
-    state.itemKey = itemKey;
-    state.value = isFunction(valueOrFun) ? valueOrFun({
-      index,
-      item: value,
-      prevIndex: void 0,
-      prevItem: void 0
-    }) : valueOrFun;
+  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 triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = React2.useCallback(
     (newState) => {
-      state.value = isFunction(newState) ? newState(state.value) : newState;
-      setRenderNum((v) => v + 1);
+      if (!triggerLayout) {
+        return;
+      }
+      setStateValue((prevValue) => {
+        return isFunction(newState) ? newState(prevValue) : newState;
+      });
       triggerLayout();
     },
-    [triggerLayout, state]
+    [triggerLayout]
   );
-  return [state.value, setState];
+  return [stateValue, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = React2.useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 function useListScrollSize() {
@@ -508,8 +550,9 @@ function useListScrollSize() {
 var noop = () => {
 };
 function useSyncLayout() {
-  if (IsNewArchitecture) {
-    const { triggerLayout: syncLayout } = React2.useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (IsNewArchitecture && containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
   } else {
     return noop;

package/index.native.mjs

@@ -390,48 +390,70 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+function useContextContainer() {
+  return useContext(ContextContainer);
+}
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
-  const key = containerId + (configId != null ? configId : "");
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityCallbacks.set(key, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    const key = containerId + (configId != null ? configId : "");
+    ctx.mapViewabilityCallbacks.set(key, callback);
+    return () => {
       ctx.mapViewabilityCallbacks.delete(key);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, configId, containerContext]);
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   useInit(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
       callback(value);
     }
   });
-  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { containerId } = containerContext;
+    ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+    return () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
-    },
-    []
-  );
+    };
+  }, [ctx, callback, containerContext]);
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
   const prevValues = useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
   useEffect(() => {
+    if (!containerContext) {
+      return;
+    }
+    const { index, value } = containerContext;
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -446,38 +468,58 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value, effect]);
+  }, [effect, containerContext]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
-  const refState = useRef({
-    itemKey: null,
-    value: null
+  var _a3, _b;
+  const containerContext = useContextContainer();
+  const computeValue = (ctx) => {
+    if (isFunction(valueOrFun)) {
+      const initializer = valueOrFun;
+      return ctx ? initializer({
+        index: ctx.index,
+        item: ctx.value,
+        prevIndex: void 0,
+        prevItem: void 0
+      }) : initializer();
+    }
+    return valueOrFun;
+  };
+  const [stateValue, setStateValue] = useState(() => {
+    return computeValue(containerContext);
   });
-  const [_, setRenderNum] = useState(0);
-  const state = refState.current;
-  if (state.itemKey !== itemKey) {
-    state.itemKey = itemKey;
-    state.value = isFunction(valueOrFun) ? valueOrFun({
-      index,
-      item: value,
-      prevIndex: void 0,
-      prevItem: void 0
-    }) : valueOrFun;
+  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 triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
     (newState) => {
-      state.value = isFunction(newState) ? newState(state.value) : newState;
-      setRenderNum((v) => v + 1);
+      if (!triggerLayout) {
+        return;
+      }
+      setStateValue((prevValue) => {
+        return isFunction(newState) ? newState(prevValue) : newState;
+      });
       triggerLayout();
     },
-    [triggerLayout, state]
+    [triggerLayout]
   );
-  return [state.value, setState];
+  return [stateValue, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 function useListScrollSize() {
@@ -487,8 +529,9 @@ function useListScrollSize() {
 var noop = () => {
 };
 function useSyncLayout() {
-  if (IsNewArchitecture) {
-    const { triggerLayout: syncLayout } = useContext(ContextContainer);
+  const containerContext = useContextContainer();
+  if (IsNewArchitecture && containerContext) {
+    const { triggerLayout: syncLayout } = containerContext;
     return syncLayout;
   } else {
     return noop;

package/keyboard.js

@@ -87,8 +87,7 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
   const setScrollProcessingEnabled = React.useCallback(
     (enabled) => {
       var _a;
-      console.log("setScrollProcessingEnabled", enabled);
-      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
+      return (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
     },
     [refLegendList]
   );

package/keyboard.mjs

@@ -66,8 +66,7 @@ var KeyboardAvoidingLegendList = forwardRef(function KeyboardAvoidingLegendList2
   const setScrollProcessingEnabled = useCallback(
     (enabled) => {
       var _a;
-      console.log("setScrollProcessingEnabled", enabled);
-      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
+      return (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
     },
     [refLegendList]
   );

package/package.json

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

package/section-list.js

@@ -365,9 +365,20 @@ var IsNewArchitecture = true;
 
 // src/state/ContextContainer.ts
 var ContextContainer = React3.createContext(null);
+function useContextContainer() {
+  return React3.useContext(ContextContainer);
+}
 function useIsLastItem() {
-  const { itemKey } = React3.useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 
@@ -1012,9 +1023,6 @@ function ScrollAdjust() {
         } else {
           scrollView.scrollBy(0, scrollDelta);
         }
-        if (IS_DEV) {
-          console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
-        }
       }
       lastScrollOffsetRef.current = scrollOffset;
     }

package/section-list.mjs

@@ -344,9 +344,20 @@ var IsNewArchitecture = true;
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+function useContextContainer() {
+  return useContext(ContextContainer);
+}
 function useIsLastItem() {
-  const { itemKey } = useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 
@@ -991,9 +1002,6 @@ function ScrollAdjust() {
         } else {
           scrollView.scrollBy(0, scrollDelta);
         }
-        if (IS_DEV) {
-          console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
-        }
       }
       lastScrollOffsetRef.current = scrollOffset;
     }

package/section-list.native.js

@@ -411,9 +411,20 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React2.createContext(null);
+function useContextContainer() {
+  return React2.useContext(ContextContainer);
+}
 function useIsLastItem() {
-  const { itemKey } = React2.useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }
 

package/section-list.native.mjs

@@ -390,9 +390,20 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+function useContextContainer() {
+  return useContext(ContextContainer);
+}
 function useIsLastItem() {
-  const { itemKey } = useContext(ContextContainer);
-  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
+  const containerContext = useContextContainer();
+  const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
+    if (containerContext) {
+      const { itemKey } = containerContext;
+      if (!isNullOrUndefined(itemKey)) {
+        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
+      }
+    }
+    return false;
+  });
   return isLast;
 }