perf(scroll): prevent unneeded forced synchronous layout on update

In the case where new items are added or the component is otherwise rerendered,
this avoids an expensive relayout in getScroll() where the result would not change.

In a production application I see as much as 9ms on unneeded synchronous
layout when this happens.

Author: STRML

react-list.es6

@@ -80,6 +80,7 @@ module.exports = class ReactList extends Component {
     const {from, size} = this.constrain(initialIndex, 0, itemsPerRow, props);
     this.state = {from, size, itemsPerRow};
     this.cache = {};
+    this.cachedScroll = null;
     this.prevPrevState = {};
     this.unstable = false;
     this.updateCounter = 0;
@@ -91,8 +92,8 @@ module.exports = class ReactList extends Component {
   }
 
   componentDidMount() {
-    this.updateFrame = this.updateFrame.bind(this);
-    window.addEventListener('resize', this.updateFrame);
+    this.updateFrameAndClearCache = this.updateFrameAndClearCache.bind(this);
+    window.addEventListener('resize', this.updateFrameAndClearCache);
     this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
   }
 
@@ -123,8 +124,8 @@ module.exports = class ReactList extends Component {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.updateFrame);
-    this.scrollParent.removeEventListener('scroll', this.updateFrame, PASSIVE);
+    window.removeEventListener('resize', this.updateFrameAndClearCache);
+    this.scrollParent.removeEventListener('scroll', this.updateFrameAndClearCache, PASSIVE);
     this.scrollParent.removeEventListener('mousewheel', NOOP, PASSIVE);
   }
 
@@ -154,6 +155,8 @@ module.exports = class ReactList extends Component {
   }
 
   getScroll() {
+    // Cache scroll position as this causes a forced synchronous layout.
+    if (typeof this.cachedScroll === 'number') return this.cachedScroll;
     const {scrollParent} = this;
     const {axis} = this.props;
     const scrollKey = SCROLL_START_KEYS[axis];
@@ -166,7 +169,8 @@ module.exports = class ReactList extends Component {
     const max = this.getScrollSize() - this.getViewportSize();
     const scroll = Math.max(0, Math.min(actual, max));
     const el = this.getEl();
-    return this.getOffset(scrollParent) + scroll - this.getOffset(el);
+    this.cachedScroll = this.getOffset(scrollParent) + scroll - this.getOffset(el);
+    return this.cachedScroll;
   }
 
   setScroll(offset) {
@@ -245,6 +249,12 @@ module.exports = class ReactList extends Component {
     return {itemSize, itemsPerRow};
   }
 
+  // Called by 'scroll' and 'resize' events, clears scroll position cache.
+  updateFrameAndClearCache(cb) {
+    this.cachedScroll = null;
+    return this.updateFrame(cb);
+  }
+
   updateFrame(cb) {
     this.updateScrollParent();
     if (typeof cb != 'function') cb = NOOP;
@@ -260,10 +270,12 @@ module.exports = class ReactList extends Component {
     this.scrollParent = this.getScrollParent();
     if (prev === this.scrollParent) return;
     if (prev) {
-      prev.removeEventListener('scroll', this.updateFrame);
+      prev.removeEventListener('scroll', this.updateFrameAndClearCache);
       prev.removeEventListener('mousewheel', NOOP);
     }
-    this.scrollParent.addEventListener('scroll', this.updateFrame, PASSIVE);
+    this.scrollParent.addEventListener('scroll', this.updateFrameAndClearCache, PASSIVE);
+    // You have to attach mousewheel listener to the scrollable element.
+    // Just an empty listener. After that onscroll events will be fired synchronously.
     this.scrollParent.addEventListener('mousewheel', NOOP, PASSIVE);
   }
 

react-list.js

@@ -131,6 +131,7 @@
 
       _this.state = { from: from, size: size, itemsPerRow: itemsPerRow };
       _this.cache = {};
+      _this.cachedScroll = null;
       _this.prevPrevState = {};
       _this.unstable = false;
       _this.updateCounter = 0;
@@ -150,8 +151,8 @@
     }, {
       key: 'componentDidMount',
       value: function componentDidMount() {
-        this.updateFrame = this.updateFrame.bind(this);
-        window.addEventListener('resize', this.updateFrame);
+        this.updateFrameAndClearCache = this.updateFrameAndClearCache.bind(this);
+        window.addEventListener('resize', this.updateFrameAndClearCache);
         this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
       }
     }, {
@@ -186,8 +187,8 @@
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        window.removeEventListener('resize', this.updateFrame);
-        this.scrollParent.removeEventListener('scroll', this.updateFrame, PASSIVE);
+        window.removeEventListener('resize', this.updateFrameAndClearCache);
+        this.scrollParent.removeEventListener('scroll', this.updateFrameAndClearCache, PASSIVE);
         this.scrollParent.removeEventListener('mousewheel', NOOP, PASSIVE);
       }
     }, {
@@ -228,6 +229,8 @@
     }, {
       key: 'getScroll',
       value: function getScroll() {
+        // Cache scroll position as this causes a forced synchronous layout.
+        if (typeof this.cachedScroll === 'number') return this.cachedScroll;
         var scrollParent = this.scrollParent;
         var axis = this.props.axis;
 
@@ -240,7 +243,8 @@
         var max = this.getScrollSize() - this.getViewportSize();
         var scroll = Math.max(0, Math.min(actual, max));
         var el = this.getEl();
-        return this.getOffset(scrollParent) + scroll - this.getOffset(el);
+        this.cachedScroll = this.getOffset(scrollParent) + scroll - this.getOffset(el);
+        return this.cachedScroll;
       }
     }, {
       key: 'setScroll',
@@ -331,6 +335,12 @@
           ++itemsPerRow;
         }return { itemSize: itemSize, itemsPerRow: itemsPerRow };
       }
+    }, {
+      key: 'updateFrameAndClearCache',
+      value: function updateFrameAndClearCache(cb) {
+        this.cachedScroll = null;
+        return this.updateFrame(cb);
+      }
     }, {
       key: 'updateFrame',
       value: function updateFrame(cb) {
@@ -352,10 +362,12 @@
         this.scrollParent = this.getScrollParent();
         if (prev === this.scrollParent) return;
         if (prev) {
-          prev.removeEventListener('scroll', this.updateFrame);
+          prev.removeEventListener('scroll', this.updateFrameAndClearCache);
           prev.removeEventListener('mousewheel', NOOP);
         }
-        this.scrollParent.addEventListener('scroll', this.updateFrame, PASSIVE);
+        this.scrollParent.addEventListener('scroll', this.updateFrameAndClearCache, PASSIVE);
+        // You have to attach mousewheel listener to the scrollable element.
+        // Just an empty listener. After that onscroll events will be fired synchronously.
         this.scrollParent.addEventListener('mousewheel', NOOP, PASSIVE);
       }
     }, {