In this article, we’ll interact with some visual learning tools to learn how PureComponent gives you an quick way to optimize your React apps.
You may know that pure components are one of the top-level APIs in the React package, but what does it do?
import React, { PureComponent } from 'react'
class Foo extends PureComponent { // 👈
render() {
//...
}
}
PureComponent comes with a predefined shouldComponentUpdate lifecycle function that checks whether its props have changed before re-rendering. That means that you could do the same check manually in a regular Component, but PureComponent gives you a handy shortcut.
Let’s take a look at how the standard Component class performs using a visual learning tool.
Source: https://alligator.io/react/performance-boost-purecomponent/