Working with React.PureComponent

React.PureComponent is similar to React.Component. The difference is that React.Component implements the shouldComponentUpdate life cycle method internally to make a shallow comparison of the state and props to decide if the component should update or not.

Getting ready

In this recipe, you will write two components, one extending React.PureComponent, and another extending React.Component, in order to see how they behave when the same properties are passed to them. Before you start, create a new package.json file with the following content:

{ 
  "scripts": { 
    "start": "parcel serve -p 1337 index.html" 
  }, 
  "devDependencies": { 
    "babel-plugin-transform-class-properties": "6.24.1", 
    "babel-preset-env": "1.6.1", 
    "babel-preset-react": "6.24.1", 
    "babel-core": "6.26.3", 
    "parcel-bundler": "1.8.1", 
    "react": "16.3.2", 
    "react-dom": "16.3.2" 
  } 
} 

Next, create a babel configuration file as .babelrc, adding the following content...