Refactor

src/core/store.ts

@@ -94,7 +94,7 @@ export const createVirtualStore = (
   const shouldAutoEstimateItemSize = !itemSize;
   const initialItemSize = itemSize || 40;
   const cache =
-    (cacheSnapshot as unknown as Cache | undefined) ??
+    (cacheSnapshot as unknown as Cache | undefined) ||
     initCache(elementsCount, initialItemSize);
   let viewportSize = initialItemSize * max(initialItemCount - 1, 0);
   let scrollOffset = 0;

src/react/VGrid.tsx

@@ -358,14 +358,14 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
       };
     }, [children]);
 
-    const startRowIndexWithMargin = max(startRowIndex - overscan, 0);
-    const endRowIndexWithMargin = min(endRowIndex + overscan, rowCount - 1);
-    const startColIndexWithMargin = max(startColIndex - overscan, 0);
-    const endColIndexWithMargin = min(endColIndex + overscan, colCount - 1);
+    const overscanedStartRowIndex = max(startRowIndex - overscan, 0);
+    const overscanedEndRowIndex = min(endRowIndex + overscan, rowCount - 1);
+    const overscanedStartColIndex = max(startColIndex - overscan, 0);
+    const overscanedEndColIndex = min(endColIndex + overscan, colCount - 1);
     const items = useMemo(() => {
       const res: ReactElement[] = [];
-      for (let i = startRowIndexWithMargin; i <= endRowIndexWithMargin; i++) {
-        for (let j = startColIndexWithMargin; j <= endColIndexWithMargin; j++) {
+      for (let i = overscanedStartRowIndex; i <= overscanedEndRowIndex; i++) {
+        for (let j = overscanedStartColIndex; j <= overscanedEndColIndex; j++) {
           res.push(
             <Cell
               key={genKey(i, j)}
@@ -385,10 +385,10 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
       return res;
     }, [
       render,
-      startRowIndexWithMargin,
-      endRowIndexWithMargin,
-      startColIndexWithMargin,
-      endColIndexWithMargin,
+      overscanedStartRowIndex,
+      overscanedEndRowIndex,
+      overscanedStartColIndex,
+      overscanedEndColIndex,
     ]);
 
     return (

src/react/VList.tsx

@@ -264,11 +264,11 @@ export const VList = forwardRef<VListHandle, VListProps>(
       []
     );
 
-    const startIndexWithMargin = max(startIndex - overscan, 0);
-    const endIndexWithMargin = min(endIndex + overscan, count - 1);
+    const overscanedStartIndex = max(startIndex - overscan, 0);
+    const overscanedEndIndex = min(endIndex + overscan, count - 1);
     const items = useMemo(() => {
       const res: ReactElement[] = [];
-      for (let i = startIndexWithMargin; i <= endIndexWithMargin; i++) {
+      for (let i = overscanedStartIndex; i <= overscanedEndIndex; i++) {
         const e = elements[i];
         // This can be undefined when items are removed
         if (exists(e)) {
@@ -287,7 +287,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
         }
       }
       return res;
-    }, [elements, startIndexWithMargin, endIndexWithMargin]);
+    }, [elements, overscanedStartIndex, overscanedEndIndex]);
 
     return (
       <Window

src/react/WVList.tsx

@@ -200,11 +200,11 @@ export const WVList = forwardRef<WVListHandle, WVListProps>(
       []
     );
 
-    const startIndexWithMargin = max(startIndex - overscan, 0);
-    const endIndexWithMargin = min(endIndex + overscan, count - 1);
+    const overscanedStartIndex = max(startIndex - overscan, 0);
+    const overscanedEndIndex = min(endIndex + overscan, count - 1);
     const items = useMemo(() => {
       const res: ReactElement[] = [];
-      for (let i = startIndexWithMargin; i <= endIndexWithMargin; i++) {
+      for (let i = overscanedStartIndex; i <= overscanedEndIndex; i++) {
         const e = elements[i];
         // This can be undefined when items are removed
         if (exists(e)) {
@@ -223,7 +223,7 @@ export const WVList = forwardRef<WVListHandle, WVListProps>(
         }
       }
       return res;
-    }, [elements, startIndexWithMargin, endIndexWithMargin]);
+    }, [elements, overscanedStartIndex, overscanedEndIndex]);
 
     return (
       <Window