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

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

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 (

Time in child:{t}

);
}
});

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

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

return (

Time in main:{currentTime}

Click me to update time

);
}
});

ReactDOM.render(

, document.body);

[1]: http://jsfiddle.net/fp2tncmb/2/

Solutions/Answers:

Solution 1:

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 state is mutated in place, but if you are careful to
always treat 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 state changed.

There are two steps of what we may call “render”:

  1. Virtual DOM render: 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.

  2. Native DOM render: 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.

Solution 2:

No, React doesn’t render everything when state changes.

  • Whenever a component is dirty (its state changed), that component and its children are re-rendered. This, to some extent, is to re-render as little as possible. The only time when render isn’t called is when some branch is moved to another root, where theoretically we don’t need to re-render anything. In your example, TimeInChild is a child component of Main, so it also gets re-rendered when the state of Main changes.

  • React doesn’t compare state data. When setState is called, it marks the component as dirty (which means it needs to be re-rendered). The important thing to note is that although render method of the component is called, the real DOM is only updated if the output is different from the current DOM tree (a.k.a diffing between the Virtual DOM tree and document’s DOM tree). In your example, even though the state data hasn’t changed, the time of last change did, making Virtual DOM different from document’s DOM, hence why the HTML is updated.

Solution 3:

Yes. It calls the render() method every time we call setState instead when “shouldComponentUpdate” returns false.

Solution 4:

Even though it’s stated in many of the other answers here, the component should either:

  • implement shouldComponentUpdate to render only when state or properties change

  • switch to extending a PureComponent, which already implements a shouldComponentUpdate method internally for shallow comparisons.

Here’s an example that uses shouldComponentUpdate, which works only for this simple use case and demonstration purposes. When this is used, the component no longer re-renders itself on each click, and is rendered when first displayed, and after it’s been clicked once.

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'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    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>