Unnecessary reflow due to setState in componentWillReceiveProps

[univerio]

See mailing list post, reproduced below for convenience:

The following reduced test case (jsfiddle) has an unnecessary reflow:

var Input = React.createClass({
    getInitialState: function () {
        return {
            text: this.props.text + "..."
        };
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState({
            text: nextProps.text + "..."
        });
    },
    render: function () {
        return React.DOM.div(null, this.state.text);
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {
            value: "foo"
        };
    },
    render: function () {
        var that = this;
        return React.DOM.div(null,
            React.DOM.input({
                value: this.state.value,
                onChange: function (e) {
                    that.setState({
                        value: e.target.value
                    });
                }
            }),
            Input({
                text: this.state.value
            }));
    }
});

React.renderComponent(App(null), document.body);

And a screenshot from the Timeline tab in Chrome Dev Tools showing the reflow:

An equivalent implementation (jsfiddle) not using setState in componentWillReceiveProps does not have the same reflow:

var Input = React.createClass({
    render: function () {
        return React.DOM.div(null, this.props.text + "...");
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {
            value: "foo"
        };
    },
    render: function () {
        var that = this;
        return React.DOM.div(null,
            React.DOM.input({
                value: this.state.value,
                onChange: function (e) {
                    that.setState({
                        value: e.target.value
                    });
                }
            }),
            Input({
                text: this.state.value
            }));
    }
});

React.renderComponent(App(null), document.body);

[sophiebits]

See also #1439.

[theREALdebater]

In a React v16 component, I defined componentWillReceiveProps inside which I always called setState (on an object with several members, including other objects). This seems to have caused a runaway loop of re-renders, because when I added code to make the call to setState conditional the loop was no longer observed. I thought calling setState in componentWillReceiveProps (and also componentWillMount) was not meant to trigger a re-render. Am I wrong? Has this changed in v16?

[gaearon]

@theREALdebater This doesn't sound related to this issue, and no, setState in componentWillReceiveProps shouldn't trigger extra re-renders. Can you please file a new issue about this, with an example reproducing it?

[aweary]

I'm going to close this out since componentWillReceiveProps is scheduled to be deprecated and this doesn't appear to be a significant issue.