Pure components in React

Introduction

React allows us to divide the code logic into separate, reusable parts known as components allowing the developer to focus on a single component at a time.

These components are re-rendered whenever there are any changes made to the props or state, but many times it happens that the changes made to the state or props do not change them but still a re-render takes place. This is an unnecessary re-render and can be saved to increase the performance of react apps.

For these performance benefits, we utilize pure components in React.

Prerequisite

To learn about pure component in React you must know the following:

• Core concepts of JavaScript like Functions.
• Knowledge of React JS core concepts like props, state, components.

What is a Pure Component in React?

To understand pure component in React we have to learn about pure functions. Pure functions are a programming concept, any function is said to be pure if it meets the following conditions:

• Same input -> Same output. Returns the same output when the same input is provided to the function.
• No changes are made to any objects or variables that were created before the function was called.

Let's take an example to better understand pure functions.

Output:

In this code, we have created a pure function add which takes two arguments a and b, and returns their addiction. This code will return the same output for the same input values, so this is a pure function.

Let's also see how an impure function looks:

Output:

The function in this code is depending on the outer variable sum and because of that, it's value is different even when the input is the same.

These examples show us the deterministic behavior of pure functions.

Pure component in React also have a similar concept. Pure component rely on the state or variables that are provided to them, i.e. they do not modify any variables outside their scope. React pure components are the components that do not re-render when the value of props and state has been updated with the same values. Since these components do not cause re-rendering when the same values are passed thus they improve performance.

Let's talk about some of the features of react pure component

• They prevent the re-rendering if props and state are the same.
• They handle shouldComponentUpdate implicitly
• Increases performance.
• Shallow comparison of state and props

Example of a pure component in React

In the code, we have a React pure component that takes points value from props and displays it inside of a span. This is a pure component as there is no props modification taking place and it will render the same output for the same input values.

We will talk in detail about how we can create pure components and how they work in the upcoming sections.

How does a Pure Component Work in React?

Working on anything is a core thing for an engineer to understand. To optimize re-rendering in React we can use the shouldComponentUpdate() lifecycle method to control whether a component should re-render or not. But react also provides us a Pure Component.

We can extend a class with PureComponent, this eliminates the need for the shouldComponentUpdate() lifecycle method.

To determine whether the React component should re-render itself or not, the PureComponent class compares the existing state and props with new props and states.

Example

Are React Functional Components Pure?

Another name for react functional components is stateless components because they lack states. Functional components do not enjoy the performance benefits and the render improvements that React.PureComponent provides because technically they are not classes.

To make a react functional component pure we have to convert it to a class that extends React.PureComponent.

For example, this is a functional component

To make it pure we have to convert it to a Class component which extends from React.PureComponent

Side Effects: (un)intended Consequences

If any data outside the called function is updated then it is considered a side effect introduced by that function. In react the rendering process must be pure, this means that the component should only return their JSX, and objects or variables that existed before they should not be changed.

An example of a Side Effect is

Output:

Here we can see that every time the <GetCount> is called it renders a different value. This is because the function GetCount() is updating a value count that is outside the scope of GetCount().

Let's look at the fix for this side effect:

Output:

In this code we have made the following changes:

• Removed the global variable count
• Passed the variable through props

Where You can Cause Side Effects?

Side effects are caused when the current function changes any variable that is outside its scope. Here are some scenarios

• Changing any object property or external variable
• Logging information to a console
• Data entry into a file
• Writing information to a network
• Any external process being started
• Calling any additional, potentially harmful functions
• Calling Asynchronous Data Streams

Looking for More Than Just JavaScript? Our Full Stack Developer Course Explores Advanced Front and Back-End Techniques. Enroll Now!