React Pure Component Pure Components in React

#react #webdev #javascript #beginners

In this article, we are going to discuss about Pure components in React JS, what is pure functions & how to convert React components into a Pure components.

What is Pure Functions?

In Javascript, when functions returns same output when same input is passed is called Pure functions. It is like returning same data for same input. So in pure function output only depend on its input arguments. Pure functions does not produced any side effects as well. In past you may have already created so many pure function.
For example:



function Add(num1, num2){
  return num1 + num2;
}

If we call the above Add(2,2) function it will always return 4 as output. So if you call the above function with same input parameters multiple number of time it will always returns 4 output. Due to this pure function can optimize and improve the performance of function.

Pure functions in React

We know that in React we can create a component in two different ways i.e one is Class component/ Stateful component and another is Functional component/Stateless component. A React component can be considered pure if it renders the same output for the same state and props.

We can convert component to pure component as below:

For class components react provides React.PureComponent base class.
For Functional component react provides React.memo HOC (Higher Order Component).

`React.PureComponent`

When a class component extends React.PureComponent base class then React treated the component as Pure component. The major difference between React.Component class and React.PureComponent is the implementation of shouldComponentUpdate(). In React.Component shouldComponentUpdate() will always returns true on the other hand in React.PureComponent it will compare the current state and props with new state and props.

As React.PureComponent implements shouldComponentUpdate() method for Pure component which will improve performance and optimize rendering. But the point here is that it is only doing the shallow comparison so if you have very complex nested object then it may give you false result.

So let's create simple class component as shown below:



import React, { Component } from "react";

class PureClassComponent extends Component {
  constructor() {
    super();
    this.state = {
      name: "React JS"
    };
  }

  changeName = () => {
    this.setState({ name: "React JS" });
  };

  render() {
    console.log("FirstComponent -- Render method called");
    return (
      <div>
        <p> Name is : {this.state.name} </p>
        <button onClick={this.changeName}>Change Name</button>
      </div>
    );
  }
}

export default PureClassComponent;

In the above component when we click on button then we are setting the same value to name in the state. But interesting thing is that even if we are setting same value it will always re-render the component.

Here are the Pure components comes into picture. Pure component compare the current state with new state and current props to new props whenever the setState() method is called. So this will help to reduce the unnecessary calls to render() method.

Now just import PureComponent class from react library and extend current component with PureComponent class and see the output in console.

Whenever we click on Change Name button we are assigning same value to state but it is not calling render method again and again.

`React.memo`

React.memo is nothing but a Higher Order function (HOC). React.memo is similar to React.PureComponent and it is for functional component instead of class component. You can wrap your functional component when component renders same output with same props passed. Due to this it will improve the performance and optimize the rendering.

React.memo only works when props of components changes. It means that if you are using state using useState hook in functional then for every state change it will render the component. Similar to React.PureComponent it is doing shallow comparison of props.

React.memo takes a first argument as component and returns a special kind of React component.

For demo purpose I have create simple counter app as shown below.

CustomLabel.js



import React from "react";

export default ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};

CounterComponent.js



import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is : {counter} </p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};
export default CounterComponent;

Here I have created two components i.e CounterComponent and CustomLabel component. CustomLabel component accepts name as prop and display it in label tag. In CustomLabel component, we have added console.log() so that we can see how many times the component is getting render. Whenever you click on button to increase count it will re-render CustomLabel Component.

Now the 'React.memo' comes in picture. So wrap the CustomLabel component inside the 'React.memo' HOC and test the application again. You will see it renders the CustomLabel component only once because the name prop is remains same on every button click.

CustomLabel.js



import React, {memo} from "react";

const CustomLabel=({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};
export default memo(CustomLabel);

Conclusion

In this article, I have explained about Pure components in React JS and also discussed how to convert Class and Functional component into Pure components.

I really hope that you enjoyed this article, share it with friends and please do not hesitate to send me your thoughts or comments.

You can follow me on twitter @sumitkharche01

Happy Coding!