Pure Component in React
Tags: webdev, react, javascript, programming
Published: 2023-04-17 22:03:48

This article was originally published on the DeadSimpleChat Blog: [Pure Component in React](https://deadsimplechat.com/blog/pure-component-in-react/)

Pure components are similar to react components but does not re-render if the props and state does not change

When a pure component receives new props and state data, it does a shallow comparison to check if the props or state data has changed.

If the data has not changed it does not re-render the component thus saving time and resources.

When re-rendering is time consuming and processing intensive it improves performance.

If you are looking for [JavaScript Chat API and SDK](https://deadsimplechat.com/javascript-chat-api-sdk) for building chat in your app or website then DeadSimpleChat is the solution for you

## What are react components

React components are like JavaScript functions. They let you split UI into different sections and think about a section of UI independently of others.

Components accept inputs called props and return react elements that display UI on the screen.

display component lifecycle methods here to increase the data

## What are React functional components and React Class Components

React components can be defined as javascript functions as well as ES6 class.

React is leaning towards functional components and class components are  being viewed as not best practice

Here is a basic example of react functional component

```javascript
function thinkAloud(props) {
  return <h1>My name is, {props.name}</h1>;
}
```

This function accepts a prop (shorthand for properties) and returns a react element. Thus this is a react functional component

```javascript
class thinkAloud extends React.Component {
  render() {
    return <h1>My name is, {this.props.name}</h1>;
  }
}
```

The function and class components both are equivalent in react's point of view.

## What are Pure components in React

We have already seen what a pure component in react is in the introduction above.

To reiterate, pure components are components that do **not** re-render if the props and state have not changed

Pure components does a shallow check every time a new prop or state is supplied to it and skip the re-render if they have not changed thus saving precious time and resources required to re-render the component

### How to use a Pure component

To use a Pure component extend the Pure component instead of the component in a class component

```javascript
import {PureComponent} from 'react'

class thinkAloud extends PureComponent {
    render() {
           return <h1>My name is, {this.props.name}!</h1>;
  }
}
```

`PureComponent` is a subclass of react component and as such has all the API's of the component class

In react a component re-renders when its parent re-renders, but as an optimization you can create a component that does not re-render when its parent re-renders as long as the props and state remains the same

Class component can opt into this by extending `PureComponent`

Let us use some of the examples to understand `PureComponent` in action

```javascript
import React, { PureComponent } from 'react';

class CarList extends PureComponent {
  render() {
    const { cars } = this.props;
    return (
      <ul>
        {cars.map(cars => (
          <li key={cars.id}>{cars.name}</li>
        ))}
      </ul>
    );
  }
}

export default CarList;
```

Here we have a list of cars in a dealership. The `CarList` takes an array of cars as a prop and lists the cars in an unordered list to visitors on the dealers website

The users going about exploring the website and new cars being added or subtracted is quite infrequent as the user is exploring the site

we can optimize the list of cars being displayed in a `PureComponent`

The `CarList` component only relies on the property `cars` which is an `array` of cars and does not have any additional state

### 1\. Table Component example

Here is another example of `PureComponent` in react as a Table Component which renders a tab

```javascript
import React, { PureComponent } from 'react';

class Cars extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {data.map((car, index) => (
            <tr key={index}>
              <td>{car.name}</td>
              <td>{car.company}</td>
              <td>{car.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Cars;
```

This is a table that shows cars by their names, which car company they are from and their price

Since the Cars Component only relies on the data prop it can be extended as a PureComponent

Whenever the parent component changes the Cars component checks if the prop data has changed or not if the prop data has not been changed the Cars component does not re-render

### 2\. Button Component example

Here is an example of a button as a pure component. The button relies on a property to change text to Next or Restart based on the parent component

```javascript
import React, { PureComponent } from 'react';

class NextOrRestart extends PureComponent {
  render() {
    const { text, onClick } = this.props;
    return (
      <button onClick={onClick}>{text}</button>
    );
  }
}

export default NextOrRestart;
```

The `NextOrRestart` class component returns a button and as it only relies on a prop and has no other complex logic it can be extended as a PureComponent

The NextOrRestart checks whether the props has changed or not if the props have not changed the class does not re-render the button element

## 3\. Chart Component example

The chart component renders its out put based on the data props. Since it does not have any other props or complex logic to depend upon. this class component can be rendered as a PureComponent

```javascript
import React, { PureComponent } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

class PureChart extends PureComponent {
  render() {
    const { data } = this.props;
    return (
      <LineChart width={600} height={300} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="uv" stroke="#ffff" />
        <Line type="monotone" dataKey="pv" stroke="#234fghft" />
      </LineChart>
    );
  }
}

export default PureChart;
```

In this example the `PureChart` components checks whether the data prop has changed or not

of the data, prop has not changed the component does not re-render and only if the props have changed does the `PureChart` component re-renders

## Migrating Simple Components from Class to functional

React is moving towards functional components and if you have older class components you can convert them functional components.

If you want to convert PureComponents to functional components you need the React Memo API

### React Memo API

Wrap a functional component in `memo` to get a memoried version on that component.

This is useful when converting PureComponents which are class components to functional components

or when you want to create PureComponents as functional components

React memo API can be used like

```javascript
import {memo} from 'react'

const testComponent = memo(function testComponent(props){
	//...
});
```

React memo API is user to avoid re-rendering when the props remain the same and as such is a performance improvement tool

React components must render pure rendering logic. It means if the props, state and context remains the same it should always render the same output

By using memo we are telling react that our component relies on this logic and react does not need to re-render the prop if these remain the same

Let us see another simple example of using  memo to convert a class component to a functional component using the memo

```javascript
import React, { PureComponent } from 'react';

class testComponent extends PureComponent {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <h2>{this.props.occupation}</h2>
      </div>
    );
  }
}
export default testComponent;
```

```javascript
import React, { memo } from 'react';

const testComponent = memo(({ name, occupation }) => {
  return (
    <div>
      <h1>{name}</h1>
      <h2>{occupation}</h2>
    </div>
  );
});
```

Here we have converted the `PureComponent` which is a subset of a class component to a functional component using the react `memo` `API`

### Updating the Memo component using state

When the component is memorized it will re-render when its state changes. memorization only has to do with the props that are passed on to it through its parent component

If the state variable is set to its current value the react will not re-render the component even without the memo.

```javascript
import React, { PureComponent } from 'react';

class testComponent extends Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Add</button>
      </div>
    );
  }
}

export default testComponent
```

```javascript
import React, { useState, memo } from 'react';

const testComponent = memo(() => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Add</button>
    </div>
  );
});
```

This is a class component that uses state to store count. when `handleclick` function is called the count increases.

### What happens to a memorized component when context changes

When a memorized component's context changes it will re-render. Memorized component only has to do with the props that are passed to it from its parent

let us look at an example

```javascript
import React, { PureComponent } from 'react';
import MyContext from './MyContext';

class testComponent extends PureComponent {
  static contextType = MyContext;

  render() {
    return <div>{this.context.item}</div>;
  }
}

export default testComponent
```

```javascript
import React, { useContext, memo } from 'react';
import SomeContext from './SomeContext';

const testComponent = memo(() => {
  const item = useContext(SomeContext);

  return <div>{item}</div>;
});
```

Note: Unlike `PureComponent` the memo does not compare new state with previous state.

In functional components, the set function with the same state already prevents the re-renders by default, even without the memo

## Conclusion

In this article we have learned what are `PureComponents`, the difference between class and functional components, how to convert class components to functional components and how to convert `PureComponents` to functional components

we also learned about the react memo API. and what happens when state and context are used with the memo API

We also looked at a lot of examples with regard to react components and class components and functional components

I hope you have learnt from this article and that it helps you in your journey.