clear-virtualizer 0.1.2 → 0.1.4

package/lib/index.cjs

@@ -111,6 +111,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   const [scrollOffset, setScrollOffset] = react.useState({ value: 0 });
   const [forcedRange, setForcedRange] = react.useState(null);
   const scrollElementRef = react.useRef(null);
+  const [scrollElement, setScrollElement] = react.useState(null);
   const rafRef = react.useRef(null);
   const observersRef = react.useRef(/* @__PURE__ */ new Map());
   const containerObserverRef = react.useRef(null);
@@ -128,7 +129,18 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   if (fenwickRef.current === null || !fenwickRef.current.total())
     fenwickRef.current = getFenwickTree(count, estimateSize);
   if (prevCountRef.current !== count) {
-    fenwickRef.current = getFenwickTree(count, estimateSize);
+    const prevTree = fenwickRef.current;
+    const prevCount = prevCountRef.current;
+    const nextTree = getFenwickTree(count, estimateSize);
+    if (prevTree && prevCount > 0) {
+      const keep = Math.min(prevCount, count);
+      for (let i = 0; i < keep; i++) {
+        const delta = prevTree.prefixSum(i + 1) - prevTree.prefixSum(i) - (nextTree.prefixSum(i + 1) - nextTree.prefixSum(i));
+        if (delta !== 0)
+          nextTree.update(i, delta);
+      }
+    }
+    fenwickRef.current = nextTree;
     prevCountRef.current = count;
   }
   const computeItems = react.useCallback(
@@ -188,22 +200,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     },
     [count, forcedRange, overscan]
   );
-  const measureElement = react.useCallback((element, index) => {
-    if (!element) {
-      const entry = observersRef.current.get(index);
-      if (entry) {
-        entry.observer.disconnect();
-        observersRef.current.delete(index);
-      }
-      return;
-    }
-    const existing = observersRef.current.get(index);
-    if (existing && existing.element === element)
-      return;
-    if (existing) {
-      existing.observer.disconnect();
-      observersRef.current.delete(index);
-    }
+  const observeItem = react.useCallback((index, element) => {
     if (typeof ResizeObserver === "undefined")
       return;
     const observer = new ResizeObserver(([entry]) => {
@@ -223,6 +220,27 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     observer.observe(element);
     observersRef.current.set(index, { observer, element });
   }, []);
+  const measureElement = react.useCallback(
+    (element, index) => {
+      if (!element) {
+        const entry = observersRef.current.get(index);
+        if (entry) {
+          entry.observer.disconnect();
+          observersRef.current.delete(index);
+        }
+        return;
+      }
+      const existing = observersRef.current.get(index);
+      if (existing && existing.element === element)
+        return;
+      if (existing) {
+        existing.observer.disconnect();
+        observersRef.current.delete(index);
+      }
+      observeItem(index, element);
+    },
+    [observeItem]
+  );
   const getMeasureRef = react.useCallback(
     (index) => {
       let fn = refCacheRef.current.get(index);
@@ -352,42 +370,37 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
       setScrollOffset({ value: el.scrollTop });
     });
   }, [releaseSettle, countRef]);
-  const scrollRef = react.useCallback(
-    (element) => {
-      if (scrollElementRef.current)
-        scrollElementRef.current.removeEventListener("scroll", handleScroll);
-      containerObserverRef.current?.disconnect();
-      containerObserverRef.current = null;
-      scrollElementRef.current = element;
-      if (element) {
-        element.addEventListener("scroll", handleScroll, { passive: true });
-        if (typeof ResizeObserver !== "undefined") {
-          const observer = new ResizeObserver(() => {
-            setScrollOffset((prevState) => ({ ...prevState }));
-          });
-          observer.observe(element);
-          containerObserverRef.current = observer;
-        }
+  const scrollRef = react.useCallback((element) => {
+    scrollElementRef.current = element;
+    setScrollElement(element);
+    setScrollOffset(element ? { value: element.scrollTop } : { value: 0 });
+  }, []);
+  react.useEffect(() => {
+    const el = scrollElement;
+    const itemObservers = observersRef.current;
+    if (el) {
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(() => {
+          setScrollOffset((prevState) => ({ ...prevState }));
+        });
+        observer.observe(el);
+        containerObserverRef.current = observer;
       }
-      setScrollOffset(element ? { value: element?.scrollTop } : { value: 0 });
-    },
-    [handleScroll]
-  );
-  react.useEffect(
-    () => () => {
+    }
+    for (const [index, { element }] of Array.from(itemObservers))
+      observeItem(index, element);
+    return () => {
       if (rafRef.current !== null)
         cancelAnimationFrame(rafRef.current);
       if (tickRafRef.current !== null)
         cancelAnimationFrame(tickRafRef.current);
-      observersRef.current.forEach((entry) => entry.observer.disconnect());
-      observersRef.current.clear();
+      el?.removeEventListener("scroll", handleScroll);
       containerObserverRef.current?.disconnect();
       containerObserverRef.current = null;
-      scrollElementRef.current?.removeEventListener("scroll", handleScroll);
-      refCacheRef.current.clear();
-    },
-    [handleScroll]
-  );
+      itemObservers.forEach((entry) => entry.observer.disconnect());
+    };
+  }, [scrollElement, handleScroll, observeItem]);
   const { virtualItems, scrollHeight } = react.useMemo(
     () => computeItems(scrollOffset.value),
     [computeItems, scrollOffset]

package/lib/index.js

@@ -109,6 +109,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   const [scrollOffset, setScrollOffset] = useState({ value: 0 });
   const [forcedRange, setForcedRange] = useState(null);
   const scrollElementRef = useRef(null);
+  const [scrollElement, setScrollElement] = useState(null);
   const rafRef = useRef(null);
   const observersRef = useRef(/* @__PURE__ */ new Map());
   const containerObserverRef = useRef(null);
@@ -126,7 +127,18 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
   if (fenwickRef.current === null || !fenwickRef.current.total())
     fenwickRef.current = getFenwickTree(count, estimateSize);
   if (prevCountRef.current !== count) {
-    fenwickRef.current = getFenwickTree(count, estimateSize);
+    const prevTree = fenwickRef.current;
+    const prevCount = prevCountRef.current;
+    const nextTree = getFenwickTree(count, estimateSize);
+    if (prevTree && prevCount > 0) {
+      const keep = Math.min(prevCount, count);
+      for (let i = 0; i < keep; i++) {
+        const delta = prevTree.prefixSum(i + 1) - prevTree.prefixSum(i) - (nextTree.prefixSum(i + 1) - nextTree.prefixSum(i));
+        if (delta !== 0)
+          nextTree.update(i, delta);
+      }
+    }
+    fenwickRef.current = nextTree;
     prevCountRef.current = count;
   }
   const computeItems = useCallback(
@@ -186,22 +198,7 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     },
     [count, forcedRange, overscan]
   );
-  const measureElement = useCallback((element, index) => {
-    if (!element) {
-      const entry = observersRef.current.get(index);
-      if (entry) {
-        entry.observer.disconnect();
-        observersRef.current.delete(index);
-      }
-      return;
-    }
-    const existing = observersRef.current.get(index);
-    if (existing && existing.element === element)
-      return;
-    if (existing) {
-      existing.observer.disconnect();
-      observersRef.current.delete(index);
-    }
+  const observeItem = useCallback((index, element) => {
     if (typeof ResizeObserver === "undefined")
       return;
     const observer = new ResizeObserver(([entry]) => {
@@ -221,6 +218,27 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
     observer.observe(element);
     observersRef.current.set(index, { observer, element });
   }, []);
+  const measureElement = useCallback(
+    (element, index) => {
+      if (!element) {
+        const entry = observersRef.current.get(index);
+        if (entry) {
+          entry.observer.disconnect();
+          observersRef.current.delete(index);
+        }
+        return;
+      }
+      const existing = observersRef.current.get(index);
+      if (existing && existing.element === element)
+        return;
+      if (existing) {
+        existing.observer.disconnect();
+        observersRef.current.delete(index);
+      }
+      observeItem(index, element);
+    },
+    [observeItem]
+  );
   const getMeasureRef = useCallback(
     (index) => {
       let fn = refCacheRef.current.get(index);
@@ -350,42 +368,37 @@ function useVirtualizer({ count, estimateSize, overscan = DEFAULT_OVERSCAN }) {
       setScrollOffset({ value: el.scrollTop });
     });
   }, [releaseSettle, countRef]);
-  const scrollRef = useCallback(
-    (element) => {
-      if (scrollElementRef.current)
-        scrollElementRef.current.removeEventListener("scroll", handleScroll);
-      containerObserverRef.current?.disconnect();
-      containerObserverRef.current = null;
-      scrollElementRef.current = element;
-      if (element) {
-        element.addEventListener("scroll", handleScroll, { passive: true });
-        if (typeof ResizeObserver !== "undefined") {
-          const observer = new ResizeObserver(() => {
-            setScrollOffset((prevState) => ({ ...prevState }));
-          });
-          observer.observe(element);
-          containerObserverRef.current = observer;
-        }
+  const scrollRef = useCallback((element) => {
+    scrollElementRef.current = element;
+    setScrollElement(element);
+    setScrollOffset(element ? { value: element.scrollTop } : { value: 0 });
+  }, []);
+  useEffect(() => {
+    const el = scrollElement;
+    const itemObservers = observersRef.current;
+    if (el) {
+      el.addEventListener("scroll", handleScroll, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(() => {
+          setScrollOffset((prevState) => ({ ...prevState }));
+        });
+        observer.observe(el);
+        containerObserverRef.current = observer;
       }
-      setScrollOffset(element ? { value: element?.scrollTop } : { value: 0 });
-    },
-    [handleScroll]
-  );
-  useEffect(
-    () => () => {
+    }
+    for (const [index, { element }] of Array.from(itemObservers))
+      observeItem(index, element);
+    return () => {
       if (rafRef.current !== null)
         cancelAnimationFrame(rafRef.current);
       if (tickRafRef.current !== null)
         cancelAnimationFrame(tickRafRef.current);
-      observersRef.current.forEach((entry) => entry.observer.disconnect());
-      observersRef.current.clear();
+      el?.removeEventListener("scroll", handleScroll);
       containerObserverRef.current?.disconnect();
       containerObserverRef.current = null;
-      scrollElementRef.current?.removeEventListener("scroll", handleScroll);
-      refCacheRef.current.clear();
-    },
-    [handleScroll]
-  );
+      itemObservers.forEach((entry) => entry.observer.disconnect());
+    };
+  }, [scrollElement, handleScroll, observeItem]);
   const { virtualItems, scrollHeight } = useMemo(
     () => computeItems(scrollOffset.value),
     [computeItems, scrollOffset]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-virtualizer",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A lightweight React hook for virtualized lists and tables with dynamic row heights, measured automatically",
   "type": "module",
   "main": "./lib/index.cjs",