Difference between Pure Component and Functional Component 🥳
Tags: react, reactnative
Published: 2020-01-12 14:54:25

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](https://github.com/Ashwin-Mothilal/articleone) 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.**

![Final Output](https://i.imgur.com/pSPCIUw.gif)

#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](React.memo) for functional components it's similar to Pure Component
2. Implement `shouldComponentUpdate` with Component to avoid unnecessary re-renders