Close #160 Fix issue with misconfiguration detection, 0.8.2

Author: caseywebdev

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.8.2
+- Fix issue with misconfiguration detection. (#160)
+
 ## 0.8.1
 - Provide an error message if the list reaches an unstable state due to
   misconfiguration. (#156, #157)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-list",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "author": "Casey Foster <[email protected]>",
   "license": "MIT",
   "main": "react-list.js",

react-list.es6

@@ -34,15 +34,15 @@ const PASSIVE = (() => {
 })() ? {passive: true} : false;
 
 const UNSTABLE_MESSAGE = 'ReactList failed to reach a stable state.';
+const MARKER_DURATION = 100;
+const MAX_UPDATES_PER_MARKER_DURATION = 20;
 
 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';
 
@@ -97,31 +97,28 @@ module.exports = class ReactList extends Component {
     this.updateFrame(this.scrollTo.bind(this, this.props.initialIndex));
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
 
     // 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();
+    if (this.updateMarker && Date.now() - this.updateMarker > MARKER_DURATION) {
+      delete this.updateMarker;
+    }
+
+    if (!this.updateMarker) {
+      this.updateMarker = Date.now();
+      this.updatesSinceMarker = 0;
     }
 
-    // Check for ping-ponging between the same two states.
-    const stateEqual = isEqual(this.state, prevState);
-    const pingPong = !stateEqual && isEqual(this.state, this.prevPrevState);
+    ++this.updatesSinceMarker;
 
-    // Ping-ponging between states means this list is unstable, log an error.
-    if (pingPong) {
+    if (this.updatesSinceMarker > MAX_UPDATES_PER_MARKER_DURATION) {
       this.unstable = true;
       return console.error(UNSTABLE_MESSAGE);
     }
 
-    // Update calculations if state has changed between renders.
-    this.prevPrevState = prevState;
-    if (!stateEqual) this.updateFrame();
+    this.updateFrame();
   }
 
   maybeSetState(b, cb) {

react-list.js

@@ -108,17 +108,15 @@
   }() ? { passive: true } : false;
 
   var UNSTABLE_MESSAGE = 'ReactList failed to reach a stable state.';
+  var MARKER_DURATION = 100;
+  var MAX_UPDATES_PER_MARKER_DURATION = 20;
 
   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);
 
@@ -163,31 +161,28 @@
       }
     }, {
       key: 'componentDidUpdate',
-      value: function componentDidUpdate(prevProps, prevState) {
+      value: function componentDidUpdate() {
 
         // 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();
+        if (this.updateMarker && Date.now() - this.updateMarker > MARKER_DURATION) {
+          delete this.updateMarker;
+        }
+
+        if (!this.updateMarker) {
+          this.updateMarker = Date.now();
+          this.updatesSinceMarker = 0;
         }
 
-        // Check for ping-ponging between the same two states.
-        var stateEqual = isEqual(this.state, prevState);
-        var pingPong = !stateEqual && isEqual(this.state, this.prevPrevState);
+        ++this.updatesSinceMarker;
 
-        // Ping-ponging between states means this list is unstable, log an error.
-        if (pingPong) {
+        if (this.updatesSinceMarker > MAX_UPDATES_PER_MARKER_DURATION) {
           this.unstable = true;
           return console.error(UNSTABLE_MESSAGE);
         }
 
-        // Update calculations if state has changed between renders.
-        this.prevPrevState = prevState;
-        if (!stateEqual) this.updateFrame();
+        this.updateFrame();
       }
     }, {
       key: 'maybeSetState',