Improve error for nested render calls

In the future we could consider wrapping the entire public API (renderComponent, setProps, setState, etc) in this check but this should do for now.

Test Plan: grunt test
This commit is contained in:
Ben Alpert
2014-04-12 15:32:15 -07:00
parent 8855d6153e
commit 382be4e9e9
2 changed files with 34 additions and 0 deletions
+11
View File
@@ -1164,6 +1164,17 @@ var ReactCompositeComponentMixin = {
'ReactCompositeComponent',
'_renderValidatedComponent',
function() {
// We set ReactCurrentOwner.current back to null at the end of this
// function, so it should be null right now. If it's not, later code may
// give confusing errors.
invariant(
ReactCurrentOwner.current == null,
'%s.render(): 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.',
this.constructor.displayName || 'ReactCompositeComponent'
);
var renderedComponent;
var previousContext = ReactContext.current;
ReactContext.current = this._processChildContext(
@@ -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: Inner.render(): 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.'
);
});
});