We track nested updates to simulate a stack overflow error and prevent

infinite loops. Every time we commit a tree, we increment a counter.
This works if you only have one tree, but if you update many separate
trees, it creates a false negative.

The fix is to reset the counter whenever we switch trees.

Author: acdlite

src/renderers/__tests__/ReactUpdates-test.js

@@ -1139,6 +1139,30 @@ describe('ReactUpdates', () => {
     expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
   });
 
+  it('can render ridiculously large number of roots without triggering infinite update loop error', () => {
+    class Foo extends React.Component {
+      componentDidMount() {
+        const limit = 12;
+        for (let i = 0; i < limit; i++) {
+          if (i < limit - 1) {
+            ReactDOM.render(<div />, document.createElement('div'));
+          } else {
+            ReactDOM.render(<div />, document.createElement('div'), () => {
+              // The "nested update limit" error isn't thrown until setState
+              this.setState({});
+            });
+          }
+        }
+      }
+      render() {
+        return null;
+      }
+    }
+
+    const container = document.createElement('div');
+    ReactDOM.render(<Foo />, container);
+  });
+
   it('does not fall into an infinite update loop', () => {
     class NonTerminating extends React.Component {
       state = {step: 0};

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -235,8 +235,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   let isUnmounting: boolean = false;
 
   // Use these to prevent an infinite loop of nested updates
-  const NESTED_UPDATE_LIMIT = 1000;
-  let nestedUpdateCount = 0;
+  const NESTED_UPDATE_LIMIT = 10;
+  let nestedUpdateCount: number = 0;
+  let nextRenderedTree: FiberRoot | null = null;
 
   function resetContextStack() {
     // Reset the stack
@@ -301,11 +302,17 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
         highestPriorityRoot.current,
         highestPriorityLevel,
       );
+      if (highestPriorityRoot !== nextRenderedTree) {
+        // We've switched trees. Reset the nested update counter.
+        nestedUpdateCount = 0;
+        nextRenderedTree = highestPriorityRoot;
+      }
       return;
     }
 
     nextPriorityLevel = NoWork;
     nextUnitOfWork = null;
+    nextRenderedTree = null;
     return;
   }
 
@@ -969,8 +976,6 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     );
     isPerformingWork = true;
 
-    nestedUpdateCount = 0;
-
     // The priority context changes during the render phase. We'll need to
     // reset it at the end.
     const previousPriorityContext = priorityContext;
@@ -1081,6 +1086,8 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     firstUncaughtError = null;
     capturedErrors = null;
     failedBoundaries = null;
+    nestedUpdateCount = 0;
+
     if (__DEV__) {
       stopWorkLoopTimer();
     }