Improve error for nested render calls

src/browser/ui/ReactMount.js

@@ -19,6 +19,7 @@
 "use strict";
 
 var DOMProperty = require('DOMProperty');
+var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactInstanceHandles = require('ReactInstanceHandles');
 var ReactPerf = require('ReactPerf');
@@ -297,6 +298,16 @@ var ReactMount = {
         nextComponent,
         container,
         shouldReuseMarkup) {
+      // Various parts of our code (such as ReactCompositeComponent's
+      // _renderValidatedComponent) assume that calls to render aren't nested;
+      // verify that that's the case.
+      invariant(
+        ReactCurrentOwner.current == null,
+        '_renderNewRootComponent(): Render methods should be a pure function ' +
+        'of props and state; triggering nested component updates from ' +
+        'render is not allowed. If necessary, trigger nested updates in ' +
+        'componentDidUpdate.'
+      );
 
       var componentInstance = instantiateReactComponent(nextComponent);
       var reactRootID = ReactMount._registerComponent(
@@ -425,6 +436,18 @@ var ReactMount = {
    *                   `container`
    */
   unmountComponentAtNode: function(container) {
+    // Various parts of our code (such as ReactCompositeComponent's
+    // _renderValidatedComponent) assume that calls to render aren't nested;
+    // verify that that's the case. (Strictly speaking, unmounting won't cause a
+    // render but we still don't expect to be in a render call here.)
+    invariant(
+      ReactCurrentOwner.current == null,
+      'unmountComponentAtNode(): Render methods should be a pure function of ' +
+      'props and state; triggering nested component updates from render is ' +
+      'not allowed. If necessary, trigger nested updates in ' +
+      'componentDidUpdate.'
+    );
+
     var reactRootID = getReactRootID(container);
     var component = instancesByReactRootID[reactRootID];
     if (!component) {

src/core/ReactUpdates.js

@@ -18,6 +18,7 @@
 
 "use strict";
 
+var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactPerf = require('ReactPerf');
 
 var invariant = require('invariant');
@@ -103,6 +104,19 @@ function enqueueUpdate(component, callback) {
   );
   ensureBatchingStrategy();
 
+  // Various parts of our code (such as ReactCompositeComponent's
+  // _renderValidatedComponent) assume that calls to render aren't nested;
+  // verify that that's the case. (This is called by each top-level update
+  // function, like setProps, setState, forceUpdate, etc.; creation and
+  // destruction of top-level components is guarded in ReactMount.)
+  invariant(
+    ReactCurrentOwner.current == null,
+    'enqueueUpdate(): Render methods should be a pure function of props ' +
+    'and state; triggering nested component updates from render is not ' +
+    'allowed. If necessary, trigger nested updates in ' +
+    'componentDidUpdate.'
+  );
+
   if (!batchingStrategy.isBatchingUpdates) {
     component.performUpdateIfNecessary();
     callback && callback.call(component);

src/core/__tests__/ReactCompositeComponent-test.js

@@ -1345,4 +1345,27 @@ describe('ReactCompositeComponent', function() {
     expect(console.warn.argsForCall.length).toBe(0);
   });
 
+  it('should disallow nested render calls', function() {
+    var Inner = React.createClass({
+      render: function() {
+        return <div />;
+      }
+    });
+    var Outer = React.createClass({
+      render: function() {
+        ReactTestUtils.renderIntoDocument(<Inner />);
+        return <div />;
+      }
+    });
+
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<Outer />);
+    }).toThrow(
+      'Invariant Violation: _renderNewRootComponent(): Render methods should ' +
+      'be a pure function of props and state; triggering nested component ' +
+      'updates from render is not allowed. If necessary, trigger nested ' +
+      'updates in componentDidUpdate.'
+    );
+  });
+
 });