{{announcement.body}}
{{announcement.title}}

Pure Components in React

DZone 's Guide to

Pure Components in React

We take a look at what pure components look like in a React.js application and how to use Immutable.js to make working with these components easier.

· Web Dev Zone ·
Free Resource

Pure components were introduced in React 15.3. React.Component and React.PureComponent differ in implementing the shouldComponentUpdate() lifecycle method. The shouldComponentUpdate() method decides the re-rendering of the component by returning a boolean. In React.Component, it returns true by default. But in pure components, shouldComponentUpdate() compares if there are any changes in state or props to re-render the component.

Here I am sharing my observations about how unnecessary renders are reduced by the pure component.

import React from 'react'; 
class Car extends React.Component{ 
    state={type:"Xylo"} 
    changeType = () => { 
        this.setState({ type:"Xylo"})
    } 
    render(){ 
        console.log("Car -- Render"); 
        return (<div>Car
            <button onClick={this.changeType}>Change Type</button>
        </div>) } 
}
export default Car;

Here, render() will be called for each set State(), though we are not representing the “type” property in the JSX and also the “type” property is not changing. We need to stop calling render() in both the above situations. To make this happen, shouldComponentUpdate() should return true by:

  • comparing only the properties represented in the JSX. Here, the “type” property is not represented in the JSX. It is unnecessary to re-render the Car component.
  • checking if the properties are really changing, i.e. is the “type” property really changing?

Pure components come into the picture in the second scenario. Pure components compare all the properties of the current state with the next state, and current props with next props for every set state() call of itself or its parent in the hierarchy. Thus, it helps in reducing unnecessary render() method calls.

A very specific thing about pure components is the shallow comparison. JavaScript is completely based on objects. The comparison is based on address references. In a shallow comparison, the references of the objects are compared leaving the internal references in the object uncompared. This creates a problem while working with objects with mutable nested structures along with pure components.

Pure Components Used With Mutable Objects

Mutable objects share the same reference. A change in one would affect the other object. So, updating them would result in mutating the state directly due to a shallow comparison. This is not a good approach. Let’s look at an example:

class Courses extends React.PureComponent{ 
    state={ arr:[{id:1,name:"C"},{id:2,name:"C++"},{id:3,name:"Java"}] }     
    changeArr = () => { 
        let arr1 = [...this.state.arr];
        arr1[1].name = "Javascript"; 
        console.log(arr1[1] === this.state.arr[1]);
        this.setState({arr:arr1}, ()=>{ 
            console.log("Done ",this.state.arr); }); 
     } 
}

Here, this.state.arr and arr1 share a different reference. But their internal structures still share the same references. As a result, a change in arr1 would change the this.state.arr. Looks like the state is updated but the state is mutated. Because arr1[1] === this.state.arr[1] is true. A shallow comparison results in updates to the virtual DOM, but the state is also mutated. If nested mutable objects need to be used with pure components, then we need to either:

  • use forceUpdate() for updating state manually.
  • use the Immutable.js library to create immutable data for nested mutable structures.

forceUpdate( )

This method reads the latest state, props, and non-state properties of the parent that are passed to the child. Its use is suited for small applications with minimal properties so that we can assume the scenarios and use them appropriately. This approach is not recommended.

Immutable.js

Immutable.js helps in creating immutable data structures for nested data. It always returns a new object with the updated operation. Therefore, it maintains immutability. It also helps in using map() on the structures but the index cannot be accessed. Supported data structures include: List, Stack, Map, Ordered Map, Set, Ordered Set. and Record.

const { Set } = require('immutable');
p = 6; 
state = { set1:Set([1,2,3,4,5]) };
increment = () => { 
    this.setState((oldState) => { 
        let newSet1 = oldState.set1.add(this.p);
        this.p++; 
        return {set1:newSet1} 
    }) 
}

Here, the add() operation does not add the element to the set1. It creates a copy of this.state.set1, adds the element p, and returns the new object reference to newSet1. Therefore, neither this.state.set1newSet1, nor the internal structures of these components share the same references. This implies that immutability has been maintained.

Conclusion

Pure components are ideal for classes with minimal and immutable properties. If we must use them with objects nested with mutable objects, it would be very complicated to maintain immutability. Irefer using Immutable.js in such scenarios.

References:

https://reactjs.org/docs/react-api.html#reactpurecomponent

https://facebook.github.io/immutable-js/docs/#/

Topics:
web dev ,react.js tutorial ,pure components ,javascript components

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}