Understanding React Pure Components

Many people get confused by the difference between a Functional Component and a Pure Component. Most of them think they are the same, but this is not true. When we use a Pure Component, we need to import PureComponent from React:

    import React, { PureComponent } from 'react';

If your React component's render method is "pure" (that means it renders the same result, given the same props and state), you can use this function to improve the performance of your application. A Pure Component performs a shallow comparison for the props and nextProps objects as well as the state and nextState objects. Pure components do not include the shouldComponentUpdate(nextProps, nextState) method, and if we try to add it, we will get a warning from React.

In this recipe, we will create a basic example to understand how Pure Components works.

Getting ready

For this recipe, we need to install the Chrome extension React Developer Tools to do a simple debug in our application...