React.js – Pure & Memo Components

In this tutorial, we would cover Pure Components and Memo Component. The following sub-topics would be addressed:

1. What are Pure Components
2. What is Shallow Comparison
3. Pure Component Example
4. Memo Components

1. What are Pure Components

Pure components in react are component whose performance are optimized. A pure component implements the shouldComponentUpdate lifecycle method with a shallow props and state comparison(SC). On the contrary, a regular component does not implement this method. It always returns true. Remember that the shouldComponentUpdate method is an Updating lifecycle method that determines if a component  should render/re-render or not. Now, a regular component always re-renders, but a pure component does an SC to see if it’s going to re-render or not.

A pure component does SC of prevState with currentState as well as prevProps with currentProps. It will only re-render is the comparison indicates a difference

2. What is Shallow Props and State Comparison(SC)

A shallow comparison for primitive types x and y would return true if both operand have the same value and are of the same type. For complex types, shallow comparison returns true if both operands reference the exact same object.

The code below illustrates this:

var x = [a, b, c];
var y = [a, b, c];
var z = x;

var is_x_equal_y = (x === y); //false
var is_x_equal_z = (x === z); //true

The first comparison, x and y, returns false because although they are the same, they don’t point to the  same object. On the other hand x and z returns true since reference the same exact object.

3. Pure Component Example

A pure component is created by extending the PureComponent class instead of the Component class.

In this example, we create three components:

ParentComponent: this is just a regular component. It would re-render every 2 seconds. We achieve this by using the setInterval() function in the componentDidMount() method to change the state, name. We also pass this state as props to it’s child components.

PureComp: a pure component. We add it as child of ParentComp. It displays the props received.

RegularComp: a regular component. We add it as child of ParentComp. Similarly, it display the name props.

The three components are shown below

Parent Component

export class ParentComp extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             name: 'Kindson'
        }
    }
    
    componentDidMount() {
        setInterval(() => {
            this.setState({
                name: 'Kindson'
            })
        }, 2000)
    }

    render() {
        console.log('== Parent Component Render===')
        return (
            <div>
                 Parent Component
                <RegularComp name={this.state.name}></RegularComp>
                <PureComp name={this.state.name}></PureComp>
            </div>
        )
    }
}

export default ParentComp

Regular Component

export class RegularComp extends Component {
    render() {
        console.log('Regular Component Render')
        return (
            <div>
                Regular Component: {this.props.name}
            </div>
        )
    }
}

export default RegularComp

Pure Component

class PureComp extends PureComponent {
    render() {
        console.log('Pure Component Render')
        return (
            <div>
                Pure Component:  {this.props.name}
            </div>
        )
    }
}

export default PureComp

And of course, you should add the parent component to the App component. Now, when the app runs, you’ll see in the console that, at first, all the three components are rendered. However, in subsequent renderings, only the Pure component is not rendered. This is because, the pure component compares the prevProps  and the props and there’s no difference. So it does not re-rendered.

This behavior is big performance boost especially for large applications.

4. Memo Components

Pure component only works in class components. So for functional component, Memo fills this need.

To make a functional component a Memo component,  in the export statement, call the React.memo() method and pass it name of the functional component as an argument. See the complete markup below:

function MemoComp({name}) {
    return (
        <div>
            Memo Component {name}
        </div>
    )
}

export default React.memo(MemoComp)

I’ll stop here. I hope this is quite clear. We’ll now move on to Refs.