Difference between Pure Component and Functional Component 🥳

Hey devs 🌍

In today's post, I want to share my knowledge and understanding of Pure Component and Functional Component. How they both differ and when to use those and how it reduces the number of re-renders for a Component.

If you end up in this post, then you already know-how React works.

Now we will see what are those mentioned above.

What the heck is Pure Component!🤯

---

The Pure Component is similar to a Component where PureComponent has it's own implementation of shouldComponentUpdate and it only compares shallow props and state and you cannot implement your own shouldComponentUpdate in it.

If you have complex data structures in your state and props then your Pure Component will not re-render when the state or props change which you don't want to happen and you will get the wrong output.

When to use them? 🤔

When your Pure Component gives the same render for the same values of Props and State of a Pure Component.

Example:

If you have a list component and you're building a list item component then you can use Pure Component which means your item component won't re-render if you change anything unrelated to the Pure Component which will increase the performance of the list.

Basic Code:

class PC extends PureComponent {
    render(){
        return <div>This is Pure Component</div>
    }
}

What is Functional Component?

---

Functional Component is a normal function where you return a View/div. They don't have any React life cycle methods. It's just a JavaScript function. It will re-render whenever your parent component re-renders, which means unwanted re-renders which you won't see visually.

Basic Code:

function FC(){
    return (
        <div>This is a Functional Component</div>
    );
}

Demo React App

---

I have created a repository to understand the differences between those.

I have an initial state

this.state = {
   dummyState: new Date().valueOf()
};

I have a parent component which has rendered three different child components named:

1. Pure Component
2. Functional Component
3. Component

 <PureChild />
 <FunctionalChild />
 <ComponentChild />

Now I'm setting an Interval in componentDidMount in Parent Component

this.interval = setInterval(() => {
    this.setState({
      dummyState: new Date().valueOf()
    });
}, 1000);

Note I haven't passed the state to the child components.

I have printed the latest Date().valueOf() in all the child component, you can see those visually.
If you run the React App you will see the values updating in the Child Components except for the Pure Component.

Now the Pure Component doesn't re-render because of the props and state in it (actually we don't have any) don't change but the Component and the Functional Component re-renders whenever the parent component re-renders.

Conclusion

---

It's good to use Pure Component to increase the performance but when to use the Functional Component, I didn't say that yet, you can just use it inside the Pure Component.

Tip:

1. You can use React.memo for functional components it's similar to Pure Component
2. Implement shouldComponentUpdate with Component to avoid unnecessary re-renders

Comments

[Jaggu]

I found this answer very helpful. I got to know about this information from one of my friend who is working in efimarkets he used this two components in that website. thanks for sharing with us.

[Parth Prajapati]

In React, a component is a reusable piece of code that returns a React element to be rendered to the DOM. There are several different ways to define a component in React:

1. Component: A class-based component is a JavaScript class that extends the React.Component base class. It has a state object and a render method that returns a React element. You can define additional methods and lifecycle hooks in the class to handle different behavior in your component.

2. PureComponent: A pure component is a class-based component that implements shouldComponentUpdate() with a shallow comparison of the props and state. This means that the component will only re-render if its props or state have changed. This can improve performance by avoiding unnecessary re-renders.

3. Stateless Functional Component: A stateless functional component is a function that takes props as an argument and returns a React element. It does not have a state object or lifecycle methods, so it is simpler than a class-based component. However, it cannot handle state or complex behavior, so it is best suited for presentational components that only need to render based on props.

In general, you should use a stateless functional component unless you need to manage state or implement additional lifecycle methods in your component. If you do need to manage state, you should consider using a class-based component or a pure component to optimize performance.

[LukeOwlclaw]

I read your article because I wanted to know when I should use create an instance of "FunctionalComponent" instead "PureComponent". Did I miss that detail?

EDIT: I found the answer here: medium.com/groww-engineering/state...

When to use Stateless Components [aka Functional Components]?
Suppose you want to create a label with some beautiful UI which will be used to rate the credibility of a profile like BEGINNER, MODERATE, EXPERT. Since its a very small component whose re-render will hardly make any difference and creating a new component for such a small case will be time-consuming. Also if you keep making components for very small-small view, soon you will end up with so many components and it will be hard to manage when working with a big project. Also always keep in mind Pure Component comes with peculiarities of the shallowEqual.

[Ashwin Mothilal]

We can create components only when required like the code become complex or we need reusability. Sometimes you can create PureComponents for performance benefits. The same doesn't apply to Functional components without using memo.

[Sergiy Ostrovsky]

Really nice demonstration!