Reduce number of setState calls dramatically

Author: caseywebdev

react-list.es6

@@ -4,13 +4,6 @@ import ReactDOM from 'react-dom';
 
 const {findDOMNode} = ReactDOM;
 
-const isEqualSubset = (a, b) => {
-  for (let key in a) if (a[key] !== b[key]) return false;
-  return true;
-};
-
-const isEqual = (a, b) => isEqualSubset(a, b) && isEqualSubset(b, a);
-
 const CLIENT_SIZE_KEYS = {x: 'clientWidth', y: 'clientHeight'};
 const CLIENT_START_KEYS = {x: 'clientTop', y: 'clientLeft'};
 const INNER_SIZE_KEYS = {x: 'innerWidth', y: 'innerHeight'};
@@ -83,7 +76,7 @@ module.exports = class ReactList extends Component {
 
   componentWillReceiveProps(next) {
     let {from, size, itemsPerRow} = this.state;
-    this.setState(this.constrain(from, size, itemsPerRow, next));
+    this.maybeSetState(this.constrain(from, size, itemsPerRow, next), NOOP);
   }
 
   componentDidMount() {
@@ -92,14 +85,17 @@ module.exports = class ReactList extends Component {
     this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
   }
 
-  shouldComponentUpdate(props, state) {
-    return !isEqual(props, this.props) || !isEqual(state, this.state);
-  }
-
   componentDidUpdate() {
     this.updateFrame();
   }
 
+  maybeSetState(b, cb) {
+    const a = this.state;
+    for (let key in b) if (a[key] !== b[key]) return this.setState(b, cb);
+
+    cb();
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.updateFrame);
     this.scrollParent.removeEventListener('scroll', this.updateFrame, PASSIVE);
@@ -257,7 +253,8 @@ module.exports = class ReactList extends Component {
     if (elEnd > end) return cb();
 
     const {pageSize, length} = this.props;
-    this.setState({size: Math.min(this.state.size + pageSize, length)}, cb);
+    const size = Math.min(this.state.size + pageSize, length);
+    this.maybeSetState({size}, cb);
   }
 
   updateVariableFrame(cb) {
@@ -289,7 +286,7 @@ module.exports = class ReactList extends Component {
       ++size;
     }
 
-    this.setState({from, size}, cb);
+    this.maybeSetState({from, size}, cb);
   }
 
   updateUniformFrame(cb) {
@@ -306,7 +303,7 @@ module.exports = class ReactList extends Component {
       this.props
     );
 
-    return this.setState({itemsPerRow, from, itemSize, size}, cb);
+    return this.maybeSetState({itemsPerRow, from, itemSize, size}, cb);
   }
 
   getSpaceBefore(index, cache = {}) {

react-list.js

@@ -78,16 +78,6 @@
   var findDOMNode = _reactDom2.default.findDOMNode;
 
 
-  var isEqualSubset = function isEqualSubset(a, b) {
-    for (var key in a) {
-      if (a[key] !== b[key]) return false;
-    }return true;
-  };
-
-  var isEqual = function isEqual(a, b) {
-    return isEqualSubset(a, b) && isEqualSubset(b, a);
-  };
-
   var CLIENT_SIZE_KEYS = { x: 'clientWidth', y: 'clientHeight' };
   var CLIENT_START_KEYS = { x: 'clientTop', y: 'clientLeft' };
   var INNER_SIZE_KEYS = { x: 'innerWidth', y: 'innerHeight' };
@@ -149,7 +139,7 @@
         var size = _state.size;
         var itemsPerRow = _state.itemsPerRow;
 
-        this.setState(this.constrain(from, size, itemsPerRow, next));
+        this.maybeSetState(this.constrain(from, size, itemsPerRow, next), NOOP);
       }
     }, {
       key: 'componentDidMount',
@@ -158,16 +148,19 @@
         window.addEventListener('resize', this.updateFrame);
         this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
       }
-    }, {
-      key: 'shouldComponentUpdate',
-      value: function shouldComponentUpdate(props, state) {
-        return !isEqual(props, this.props) || !isEqual(state, this.state);
-      }
     }, {
       key: 'componentDidUpdate',
       value: function componentDidUpdate() {
         this.updateFrame();
       }
+    }, {
+      key: 'maybeSetState',
+      value: function maybeSetState(b, cb) {
+        var a = this.state;
+        for (var key in b) {
+          if (a[key] !== b[key]) return this.setState(b, cb);
+        }cb();
+      }
     }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
@@ -362,7 +355,8 @@
         var pageSize = _props4.pageSize;
         var length = _props4.length;
 
-        this.setState({ size: Math.min(this.state.size + pageSize, length) }, cb);
+        var size = Math.min(this.state.size + pageSize, length);
+        this.maybeSetState({ size: size }, cb);
       }
     }, {
       key: 'updateVariableFrame',
@@ -401,7 +395,7 @@
           ++size;
         }
 
-        this.setState({ from: from, size: size }, cb);
+        this.maybeSetState({ from: from, size: size }, cb);
       }
     }, {
       key: 'updateUniformFrame',
@@ -425,7 +419,7 @@
         var size = _constrain.size;
 
 
-        return this.setState({ itemsPerRow: itemsPerRow, from: from, itemSize: itemSize, size: size }, cb);
+        return this.maybeSetState({ itemsPerRow: itemsPerRow, from: from, itemSize: itemSize, size: size }, cb);
       }
     }, {
       key: 'getSpaceBefore',