Merge pull request #157 from orgsync/ping-pong

Close #156 Add state stability check

Author: caseywebdev

README.md

@@ -171,7 +171,7 @@ viewport.
 
 ## FAQ
 
-##### Why is the list freezing/overflowing the stack?
+##### What is "ReactList failed to reach a stable state."?
 
 This happens when specifying the `uniform` type without actually providing
 uniform size elements. The component attempts to draw only the minimum necessary
@@ -189,7 +189,7 @@ spacing.
 
 ##### Why is there no onScroll event handler?
 
-If you need an onScroll handler, just add the handler to the div wrapping your ReactList component: 
+If you need an onScroll handler, just add the handler to the div wrapping your ReactList component:
 
 ```
 <div style={{height: 300, overflow: 'auto'}} onScroll={this.handleScroll}>

react-list.es6

@@ -33,6 +33,16 @@ const PASSIVE = (() => {
   return hasSupport;
 })() ? {passive: true} : false;
 
+const UNSTABLE_MESSAGE = 'ReactList failed to reach a stable state.';
+
+const isEqualSubset = (a, b) => {
+  for (let key in b) if (a[key] !== b[key]) return false;
+
+  return true;
+};
+
+const isEqual = (a, b) => isEqualSubset(a, b) && isEqualSubset(b, a);
+
 module.exports = class ReactList extends Component {
   static displayName = 'ReactList';
 
@@ -72,6 +82,8 @@ module.exports = class ReactList extends Component {
       this.constrain(initialIndex, pageSize, itemsPerRow, this.props);
     this.state = {from, size, itemsPerRow};
     this.cache = {};
+    this.prevPrevState = {};
+    this.unstable = false;
   }
 
   componentWillReceiveProps(next) {
@@ -85,15 +97,37 @@ module.exports = class ReactList extends Component {
     this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
   }
 
-  componentDidUpdate() {
-    this.updateFrame();
+  componentDidUpdate(prevProps, prevState) {
+
+    // If the list has reached an unstable state, prevent an infinite loop.
+    if (this.unstable) return;
+
+    // Update calculations if props have changed between renders.
+    const propsEqual = isEqual(this.props, prevProps);
+    if (!propsEqual) {
+      this.prevPrevState = {};
+      return this.updateFrame();
+    }
+
+    // Check for ping-ponging between the same two states.
+    const stateEqual = isEqual(this.state, prevState);
+    const pingPong = !stateEqual && isEqual(this.state, this.prevPrevState);
+
+    // Ping-ponging between states means this list is unstable, log an error.
+    if (pingPong) {
+      this.unstable = true;
+      return console.error(UNSTABLE_MESSAGE);
+    }
+
+    // Update calculations if state has changed between renders.
+    this.prevPrevState = prevState;
+    if (!stateEqual) this.updateFrame();
   }
 
   maybeSetState(b, cb) {
-    const a = this.state;
-    for (let key in b) if (a[key] !== b[key]) return this.setState(b, cb);
+    if (isEqualSubset(this.state, b)) return cb();
 
-    cb();
+    this.setState(b, cb);
   }
 
   componentWillUnmount() {

react-list.js

@@ -107,6 +107,18 @@
     return hasSupport;
   }() ? { passive: true } : false;
 
+  var UNSTABLE_MESSAGE = 'ReactList failed to reach a stable state.';
+
+  var isEqualSubset = function isEqualSubset(a, b) {
+    for (var key in b) {
+      if (a[key] !== b[key]) return false;
+    }return true;
+  };
+
+  var isEqual = function isEqual(a, b) {
+    return isEqualSubset(a, b) && isEqualSubset(b, a);
+  };
+
   _module3.default.exports = (_temp = _class = function (_Component) {
     _inherits(ReactList, _Component);
 
@@ -127,6 +139,8 @@
 
       _this.state = { from: from, size: size, itemsPerRow: itemsPerRow };
       _this.cache = {};
+      _this.prevPrevState = {};
+      _this.unstable = false;
       return _this;
     }
 
@@ -149,16 +163,38 @@
       }
     }, {
       key: 'componentDidUpdate',
-      value: function componentDidUpdate() {
-        this.updateFrame();
+      value: function componentDidUpdate(prevProps, prevState) {
+
+        // If the list has reached an unstable state, prevent an infinite loop.
+        if (this.unstable) return;
+
+        // Update calculations if props have changed between renders.
+        var propsEqual = isEqual(this.props, prevProps);
+        if (!propsEqual) {
+          this.prevPrevState = {};
+          return this.updateFrame();
+        }
+
+        // Check for ping-ponging between the same two states.
+        var stateEqual = isEqual(this.state, prevState);
+        var pingPong = !stateEqual && isEqual(this.state, this.prevPrevState);
+
+        // Ping-ponging between states means this list is unstable, log an error.
+        if (pingPong) {
+          this.unstable = true;
+          return console.error(UNSTABLE_MESSAGE);
+        }
+
+        // Update calculations if state has changed between renders.
+        this.prevPrevState = prevState;
+        if (!stateEqual) 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();
+        if (isEqualSubset(this.state, b)) return cb();
+
+        this.setState(b, cb);
       }
     }, {
       key: 'componentWillUnmount',