ReactJS - Does render get called any time “setState” is called?

Question

Does React re-render all components and sub components every time setState() is called?

If so, why? I thought the idea was that React only rendered as little as needed - when state changed.

In the following simple example, both classes render again when the text is clicked, despite the fact that the state doesn't change on subsequent clicks, as the onClick handler always sets the state to the same value:

this.setState({'test':'me'});

I would've expected that renders would only happen if state data had changed.

Here's the code of the example, as a JS Fiddle, and embedded snippet:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

I had the same issue, I don't know the exact solution. But I had cleaned up the unwanted codes from the component it started working as usual. — Jaison James
I would like to point out that in your example - because how your element is designed does not solely rely on a unique state - calling setState() even with dummy data does cause the element to render differently so I would say yes. Absolutely it should try to re-render your object when something might have changed because otherwise your demo - assuming it was the intended behaviour - wouldn't work! — Tadhg McDonald-Jensen
You may be right @TadhgMcDonald-Jensen - but from my understanding, React would've rendered it the first time (since state changes from nothing to something that first time), then never had to render again. I was wrong though, of course - as it looks like React requires you to write your own shouldComponentUpdate method, which I assumed a simple version of it must already be included in React itself. Sounds like the default version included in react simply returns true - which forces the component to re-render every single time. — Brad Parks
Yes but it only needs to re-render in the virtual DOM then it only changes the actual DOM if the component is rendered differently. Updates to the virtual DOM are usually negligible (at least compared to modifying things on the actual screen) so calling render every time it might need to update then seeing that no change has happened not very expensive and safer than assuming it should render the same. — Tadhg McDonald-Jensen

Petr Petr · Accepted Answer · 2014-07-13T03:30:44

Does React re-render all components and sub-components every time setState is called?

By default - yes.

There is a method boolean shouldComponentUpdate(object nextProps, object nextState), each component has this method and it's responsible to determine "should component update (run render function)?" every time you change state or pass new props from parent component.

You can write your own implementation of shouldComponentUpdate method for your component, but default implementation always returns true - meaning always re-run render function.

Quote from official docs http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

By default, shouldComponentUpdate always returns true to prevent subtle bugs when the state is mutated in place, but if you are careful to always treat the state as immutable and to read-only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

Next part of your question:

If so, why? I thought the idea was that React only rendered as little as needed - when the state changed.

There are two steps of what we may call "render":

Virtual DOM renders: when render method is called it returns a new virtual dom structure of the component. As I mentioned before, this render method is called always when you call setState(), because shouldComponentUpdate always returns true by default. So, by default, there is no optimization here in React.
Native DOM renders: React changes real DOM nodes in your browser only if they were changed in the Virtual DOM and as little as needed - this is that great React's feature which optimizes real DOM mutation and makes React fast.

ReactJS - Does render get called any time “setState” is called?

7 Answers