ReactJS Pure Components

class MyPureComponent extends React.PureComponent {

What are pure components?

A pure component makes sure it handles the shouldComponentUpdatefor you. This is where the current properties are tested against previous properties and renders the changes or skips the rendering if the properties did not change. When researching pure components I found out that they make a shallow compare of the properties. This means that it will not compare objects that contain properties in a deeper level. This is only good for primitive data types. Just to set a comparison for the Angular people, the concept of dumb components with inputs is a lot like pure components.

Why should you use them?

Pure components have some performance improvements and render optimizations, as they will only re render when the properties change. This is because PureComponents changes the life-cycle method shouldComponentUpdate and adds some logic to automatically check whether a re-render is required for the component.

When should I use this?

Only use pure components if you’re root(parent) level component needs updating while your child components do not need to be updated.

Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also “pure”.

Thanks for reading and happy coding!