React Faster Performance: Highlighting React Components Updates

Problems we commonly face when using React is the case of wasted renders. To conquer these problems, we need sophisticated tools to enable us to knife through these problems to see why and how they occur.

React Developer Tools provides just that. In this post, we will learn how we can leverage React Developer Tools to yet another good cause. But, first, we have to know what a wasted render is.

Check out this new REST/GraphQL testing tool:

POSTly

Wasted renders

Wasted render occurs when a component is re-rendered for no apparent reason.

Why is that?

All Components in React have an internal state and properties called props they maintain. Now, when either of these changes. Common sense tells us that the Component(s) should be re-rendered so the new states and props will reflect in the DOM.

If none of the state and props values have been, also common sense tells us that there is no need to re-render the component since neither the state nor the props values have changed.

Now, when a Component is rendered when the state and the props have not changed, this is deemed to be a wasteful rendering. Our app might suffer from performance slowdowns.

Though, it will be inconsequential when the Component sub-tree is about 5~10 components. But looking at the sub-tree at the scale of hundreds or thousands components, that is when the performance will really be felt.

See this example

class Count extends Component {
    constructor() {
        this.state = {
            count: 0
        }
    }
    render() {
        return (
            <div>
                <div>Count: {this.state.count}</div>
                <button onClick={() => this.setState({count: this.state.count + 1})}>Incr</button>
                <button onClick={() => this.setState({count…