What are pure components in React?

React components are the building blocks of a React application, representing different parts of the user interface. In React, there are four types of components. We will discuss pure components in this answer.

What are pure components?

Pure components are a specialized type of components in React that optimize rendering performance by implementing a shallow comparison of props and state. They do not re-render when the value of state and props has been updated with the same values. They are an alternative to regular components that extend the React.Component class. Pure components extend the React.PureComponent class instead.

Shallow comparison

When a pure component receives new props or its state is updated, React automatically performs a shallow comparisonShallow comparison is a way to quickly check if two things are the same by comparing their surface-level properties, like numbers or simple pieces of information, without going deep into the details or inner structure. of the new and previous props and state. It checks if there are any differences between the old and new values. If there are no changes, React prevents unnecessary re-rendering of the component and its child components. This comparison is known as a shallow comparison because it checks for equality at the top level, without deeply comparing nested objects or arrays.

Note: Use pure react children components inside your pure component.

Advantages of pure components

1. Performance optimization: Pure components minimize re-renders by avoiding unnecessary rendering cycles when there are no changes in props or state. This is more helpful in cases where expensive calculations or API calls are involved.

2. Simplified code: Pure components simplify your code by reducing the need for manual checks and optimizations. React handles the comparison logic automatically.

3. Easy integration: Pure components can replace regular components in your code. You can easily convert a component to a pure component by changing the base class from React.Component to React.PureComponent.

Implementation

To illustrate how pure components work, let's consider a simple example. We will compare the implementation of a regular component and a pure component.

Regular component

Output

Every time the component receives new props, it will re-render regardless of whether the props have actually changed.

Pure component

The pure component will only re-render if there are differences in the props or state values as shown below. As we are setting the counter value to the same value (0), it is not re-rendering.

Output

Explanation

Now, let's see the explanation of real component and pure component examples and find the difference between their codes.

Regular component

• Line 3: This line defines a class component called App that extends the Component class from React.

• Lines 4–9: This block defines the constructor method of the App component. It initializes the state of the component with a property counter set to 0.

• Lines 11–18: The componentDidMount method is called immediately after the component is mounted. It sets up an interval that invokes a callbackA callback function is a function that is passed as an argument to another function and is called at a specific point during the execution of that function. function every 3 seconds. The setState method is called with an object that has a counter property set to this.state.counter. However, this does not update the state because the value is not modified.

• Lines 20–22: The componentDidUpdate method is called whenever the component updates and re-renders. It logs 'App updated' to the console.

• Lines 24–31: The render method is responsible for rendering the component's UI. It logs 'Render invoked' to the console.

Pure component

• Line 4: This line defines a class component called App that extends the PureComponent class from React.

• The rest of the code is the same as the regular component.

Important considerations

1. Immutable data: To ensure the proper functioning of pure components, it is important to use immutable data structures for props and states. Immutable data ensures that a new object or array is created whenever there are changes, which enables accurate shallow comparisons.

2. Nested objects or arrays: Shallow comparisons in pure components may not work as expected for deeply nested objects or arrays. In such cases, you should consider using immutable data libraries or do implement custom shouldComponentUpdate logic.

Conclusion

Pure components offer a valuable optimization technique in React by reducing unnecessary re-renders. They automatically perform shallow comparisons of props and state, resulting in improved performance and simplified code.