virtual-dom and shouldComponentUpdate

Question

If I was right, the Virtual DOM in ReactJS compares the previous DOM with the current DOM i.e, formed after a change in state tree. Then why the child components rerenders when there is change in parent props.

If virtual DOM renders only the DOM that is not already rendered, why should I use shouldComponentUpdate() method.

I have watched many videos on this but I didn't get exact way they behave. It would be a great pleasure if someone can clearly explain the following doubts.

1) Does virtual DOM every-time renders only the components which are not already rendered or will there be any exceptions?

2)If virtual DOM every-time renders only the components which are not already rendered, why the child components re-renders when there is change in parent props?

3)When should I use shouldComponentUpdate()?

score 2 · Accepted Answer · answered Oct 22 '17 at 18:17

1) Does virtual DOM every-time renders only the components which are not already rendered or will there be any exceptions?

The Virtual DOM is an abstraction of the HTML DOM. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction. What virtual DOM does is that instead of rendering the whole page, it renders only the components with the changes. There can be all the components already present but if a change has occurred in one component it only re-renders that component.

2) If virtual DOM every-time renders only the components which are not already rendered, why the child components re-renders when there is change in parent props?

The child components re-render when there is a change in parent props is because the props are passed to child components and they behave according to those props. And as mentioned above, whenever there is a change, the component re-renders.

3) When should I use shouldComponentUpdate()?

shouldComponentUpdate() is used to optimize re-renders. The method either returns true or false. It is up to you that how you want your component to render and re-render. It is basically used for performance enhancement. There might be cases when you don't want the component to re-render even on state change, so you use this method. For example:

shouldComponentUpdate(nextProps, nextState) {
  if(this.props.abc !== nextProps.abc) {
    // anything you want to do and return true or false accordingly
  }
}

Rui Ferrão · Answer 2 · 2018-03-22T14:35:02.037

I do not think the previous reply addresses the question being asked. I believe than in essence, what is being asked is:

Does the Virtual DOM reconciliation process not make the shouldComponentUpdate() method redundant?

The answer is no.

The reason is that when this reconciliation process finds a difference in a component on the tree, for performance reasons of the diffing algorithm, it will re-render the whole subtree.

This is clearly understood with the following simple example:

class NothingChanges extends React.Component {
    render() {
        return <h3>Nothing changed here...</h3>;
    }
}

class Counter extends React.Component {
    state = { value: 0 };

    increment = () => {
        this.setState(
            prevState => ({ value: prevState.value + 1 })
        );
    };

    render() {
        return (
            <div>
                <h2 onClick={this.increment}>{this.state.value}</h2>
                <NothingChanges />
            </div>
        );
    }
}

Although nothing changes on the NothingChanges component, its render function will be called every time the parent component changes its state.

If we add a shouldComponentUpdate() { return false; } method to it, we will get the exact same visual result but without the unnecessary re-renders.

virtual-dom and shouldComponentUpdate

2 Answers2