PURE COMPONENTS IN REACT

PureComponent in React JS

In React lifecycle, there is a method for comparing the current and new values of both state and props. It is called the shouldComponentUpdate() method but it is rarely used. It is generally used to let React know that the default will re-render itself if there is no change in the Component’s output due to the current state and props. It always returns a Boolean value (true by default).

Now PureComponent() has taken its place and is more likely to tell the difference between the two states as it performs a shallow comparison between the two and decides if the React component should re-render itself or not. If the values are the same, there will be no re-rendering of the default values.

shouldComponentUpdate()

Syntax

shouldComponentUpdate(nextProps, nextState)

There are three rarely used lifecycle methods in React, and it is one of them that only exists as a performance optimizer and can’t be relied upon every time as that may lead to some errors.

Extending a class of React. Components with React.PureComponents give us many advantages over simple React. Components. They are -

1. Higher performance of the Component
2. Faster rendering of our App
3. There will be no re-rendering of the default values until there is a change in the values.

Every coin has two sides and every method comes with its share of risks of using it. Here are some disadvantages or precautions to be taken before using it -

1. It is not very effective on complex/nested data structures and arrays as it will return false, and there will be no update on that subtree.
2. To make that happen, ensure every child’s Components are pure and should contain simple objects.

Components are said to be pure when the current and new values of both the state and props are equal

This extension of components to PureComponents is only possible with Class Components as only class components have the lifecycle method.

PureCompinents in Class Components

import React, {PureComponent} from ‘react’;
export default class Test extends PureComponent{
render(){ return ‘’; }
}

Conclusion

1. PureComponent can be created by extending a Component class.
2. The PureComponent() performs a shallow comparison between the current and the new values of both state and props by implementing the shouldComponentUpdate() lifecycle method.
3. If there is no difference between the two (initial and new state and props), there will be no re-rendering of the Component.
4. This ensures high performance and efficiency with faster rendering
5. Children of the nested data should be pure for Pure Component to work properly else we receive an error.