cogsbox-state 0.5.320 → 0.5.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.320",
+  "version": "0.5.322",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -1809,14 +1809,6 @@ function createProxyHandler<T>(
               } = options;
 
               const containerRef = useRef<HTMLDivElement | null>(null);
-
-              const sourceArray = getGlobalStore().getNestedState(
-                stateKey,
-                path
-              ) as any[];
-              const totalCount = sourceArray.length;
-
-              // Start at top, will adjust once container is measured
               const [range, setRange] = useState({
                 startIndex: 0,
                 endIndex: 10,
@@ -1824,7 +1816,6 @@ function createProxyHandler<T>(
 
               const isLockedToBottomRef = useRef(stickToBottom);
               const [shadowUpdateTrigger, setShadowUpdateTrigger] = useState(0);
-              const hasInitializedRef = useRef(false);
 
               useEffect(() => {
                 const unsubscribe = getGlobalStore
@@ -1835,6 +1826,12 @@ function createProxyHandler<T>(
                 return unsubscribe;
               }, [stateKey]);
 
+              const sourceArray = getGlobalStore().getNestedState(
+                stateKey,
+                path
+              ) as any[];
+              const totalCount = sourceArray.length;
+
               const { totalHeight, positions } = useMemo(() => {
                 const shadowArray =
                   getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
@@ -1910,40 +1907,20 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // Initialize at bottom if needed
-                if (
-                  stickToBottom &&
-                  !hasInitializedRef.current &&
-                  totalCount > 0 &&
-                  container.clientHeight > 0
-                ) {
-                  hasInitializedRef.current = true;
-
-                  // Now we have the actual container height, calculate visible items
-                  const visibleCount = Math.ceil(
-                    container.clientHeight / itemHeight
-                  );
-                  const startIdx = Math.max(
-                    0,
-                    totalCount - visibleCount - overscan
-                  );
-
-                  // Set range to show bottom items
-                  setRange({
-                    startIndex: startIdx,
-                    endIndex: totalCount,
-                  });
-
-                  // Scroll to bottom
-                  container.scrollTop = container.scrollHeight;
-                }
-
                 updateVirtualRange();
 
                 return () => {
                   container.removeEventListener("scroll", handleUserScroll);
                 };
-              }, [totalCount, positions, stickToBottom, itemHeight, overscan]);
+              }, [totalCount, positions]);
+
+              // SEPARATE EFFECT JUST FOR SCROLLING TO BOTTOM
+              useEffect(() => {
+                if (stickToBottom && containerRef.current && totalCount > 0) {
+                  // Just scroll to a massive number every time count changes
+                  containerRef.current.scrollTop = 999999999;
+                }
+              }, [totalCount, stickToBottom]);
 
               const scrollToBottom = useCallback(
                 (behavior: ScrollBehavior = "smooth") => {