React Functional Components, Class Components and Pure Component

In this article we will learn about the different types of react components, and what are the differences in between the components (functional, class and pure components).

React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing React.Component or React.PureComponent as per react official doc.

Functional Components

A Functional component is the simplest way to define a component in ReactJs, it’s a simple javascript function which returns a React element. Functional components are also known as stateless components.

Let’s understand with an example of a Functional Component

import React from 'react';
 function App() {
  const greeting = 'Hello Functional Component!';
 return <h1>{greeting}</h1>;
}
 export default App;

React functional component with props
In React, props are just like HTML attributes for the components, these are used to pass some information from one component to another.

import React from 'react';
 function App() {
  const greeting = 'Hello Functional Component!';
 return <Headline value={greeting} />;
}
function Headline(props) {
  return <h1>{props.value}</h1>;
}
 export default App;

React functional component with ES6 arrow function

import React from 'react';
 const App = () => {
  const greeting = 'Hello Functional Component!';
 return <Headline value={greeting} />;
};
const Headline = ({ value }) => {
  return <h1>{value}</h1>;
};
export default App;

Class Components

A Class components are ES6 classes based Components. A component which provide more features to deal with codes. It also receives props like function components and is able to define its own states.
Each component in react has several life-cycle methods, which are being used from time to time.

Here are the list of Life-Cycle methods which are used depending on the requirements of code:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
5. shouldComponentUpdate()
6. getSnapshotBeforeUpdate()
7. componentDidUpdate()
8. shouldComponentUpdate()

We will go in depth of react life-cycle in our next article

Let’s take a example of class component

class Greeting extends React.Component {
constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello, Class Component</h1>;
  }
}
Export default Greeting

Pure Component

As per Reacts official documentation: React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Let's take an example while creating three files to understand the above official definition and how pure components works:

First file - index.js, import below created files here

import React, { Component } from 'react';
import Child from './Child';
import Pure from './pure';
 
class PureComp extends Component{
   constructor(props){
       super(props);
       this.state = {
           name: 'Shahab'
       }
   }
   shouldComponentUpdate(nextProps, nextState){
       if(nextState.name !== this.state.name){
           return true
       }
       return false
   }
   componentDidMount(){
       setInterval(() => {
           this.setState({
               name: 'Shahab'
           })
       }, 2000);
   }
 
   render(){
       return(
           <div>
               Parent Component: {this.state.name}   
               <Child />
               <Pure />
           </div>
       )
   }
}
export default PureComp;
 

Second file - pure.js

import React, { PureComponent } from 'react'
 class Pure extends PureComponent{
   render(){
       console.log('Pure Components')
       return(
           <div>Pure Components</div>
       )
   }
}
export default Pure

Third file - child.js

import React, {Component} from 'react'
 class Child extends Component{
   state ={
       name: 'Ibaad'
   }
   shouldComponentUpdate(nextProps, nextState){
       if(nextState.name !== this.state.name){
           return true
       }
       return false
   }
  
   render(){
       console.log('Child Components')
       return(
           <div>
               Child Component: {this.state.name}
           </div>
       )
   }
}
export default Child

Explanation of Shallow Comparison (SC) which are used in above pure components:
Primitive Types:
A (SC) b returns true if a and b have same values and are of same type.
Ex: string ‘Shahab’ (SC) string ‘Shahab’ returns true.

Complex Types
A (SC) b returns true if a and b reference the exact same object.
Ex in Array:

Var a = [1,2,3];
Var b = [1,2,3];
Var c = a;
Var ab_eq = (a === b) // false
Var ac_eq = (a === b) // true

Ex in Object:

Var a = {x = 1, x = 2};
Var b = {x = 1, x = 2};
Var c = a;
Var ab_eq = {a === c} // false
Var ac_eq = {a === b} // true

#reactjs #javascript #function #components #es6