perf(useVirtual): mutate inner element styles only when items are upd…

…ated
wellyshen · Jul 4, 2021 · 70d04ac · 70d04ac
1 parent 8e858cf
commit 70d04ac
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/.changeset/tall-gifts-fail.md b/.changeset/tall-gifts-fail.md
@@ -0,0 +1,5 @@
+---
+"react-cool-virtual": patch
+---
+
+perf(useVirtual): mutate inner element styles only when items are updated
diff --git a/src/useVirtual.ts b/src/useVirtual.ts
@@ -322,12 +322,9 @@ export default <
         return;
       }
 
-      const { oStart, oStop, vStart, vStop, margin, innerSize } =
-        getCalcData(scrollOffset);
-
-      innerRef.current.style[marginKey] = `${margin}px`;
-      innerRef.current.style[sizeKey] = `${innerSize}px`;
-
+      const calcData = getCalcData(scrollOffset);
+      const { oStart, oStop, vStart, vStop } = calcData;
+      let { margin, innerSize } = calcData;
       const nextItems: Item[] = [];
       const stickies = Array.isArray(stickyIndicesRef.current)
         ? stickyIndicesRef.current
@@ -406,16 +403,20 @@ export default <
             measureRef: () => null,
           });
 
-          innerRef.current.style[marginKey] = `${margin - size}px`;
-          innerRef.current.style[sizeKey] = `${innerSize + size}px`;
+          margin -= size;
+          innerSize += size;
         }
       }
 
-      setItems((prevItems) =>
-        shouldUpdate(prevItems, nextItems, { measureRef: true })
-          ? nextItems
-          : prevItems
-      );
+      setItems((prevItems) => {
+        if (shouldUpdate(prevItems, nextItems, { measureRef: true })) {
+          innerRef.current!.style[marginKey] = `${margin}px`;
+          innerRef.current!.style[sizeKey] = `${innerSize}px`;
+          return nextItems;
+        }
+
+        return prevItems;
+      });
 
       if (!isScrolling) return;