[React] PureComponent in React

In this lesson, you will learn how to use PureComponent in React to reduce the number of times your component re-renders.

This works because PureComponent implements a shallow comparison for us by default in shouldComponentUpdate() , saving us time and reducing the complexity of our components. Its important to note that the comparison is shallow, meaning that if you are updating an object with nested values the component will not re-render as React has not noticed a change.

The same, if you pass a prop as a function reference, it will not cause re-render, but is you pass a anonymous arrow function which means it will create a new function every time, then it will cuase re-render.

 handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

// pass a function
<Counter onChange={this.handleChange} />

// vs pass a arrow function
<Counter onChange={() => console.log('this will cause re-render')} />