Hello Folks !!

I assume that you have basic knowledge of what is a React Component ? If not, do check my other blog 👉 link

Let's explore about 2 types of React Components.

1. Class Component
2. Functional Component

Class Component

A basic class component looks like the following code snippet. While creating the component, the name of the component should start with an uppercase letter.

import React from 'react' ;                       // line 1
import ReactDOM from 'react-dom' ;      // line 2

class Rainbow extends React.Component {            // line 3
  render() {
    return <h1> Rainbow Colors : VIBGYOR </h1>;
  }
};                                                                                       // line 7

ReactDOM.render(<Rainbow />,document.getElementById('root'));  // line 8

The output of the code snippet would be :

• Line 1 & 2 imports required packages to build a react component
• Everything between lines 3 & 7 are the instructions.
• Line 3 results in a new component class declaration named Rainbow. This class has one method called render() which is a standard JavaScript class syntax.
• Line 8 is a must, if you want to render a component to the front-end.

ReactDOM.render() takes 2 arguments :

1. Component to be rendered
2. Where to be rendered ?

The component to be rendered here is <Rainbow/>. ReactDOM.render() runs the 'render()' method of the passed component.

Second argument specifies that, <Rainbow/> component should be displayed in an element with id = "root".

Class component with props

We can also send information into the component using props.

Continuing with the same example,

import React from 'react' ;                       
import ReactDOM from 'react-dom' ;     

class Rainbow extends React.Component {            
  render() {
    return <h1> User Passed : {this.props.color} color as prop</h1>;    // this keyword is important
  }
};

ReactDOM.render( <Rainbow color = "Red" /> , document.getElementById('root'));

The output of the code snippet would be :

Functional Component

Relating with the same Rainbow example, the functional component will have the below syntax:

import React from 'react' ;                       
import ReactDOM from 'react-dom' ; 

function Rainbow() {
         return <h1> Rainbow Colors : VIBGYOR </h1>;
}
ReactDOM.render(<Rainbow />,document.getElementById('root'));

Yes captain , affirmative !! It renders the same output as the class component (without props) we discussed earlier.

Functional component with props

The below code block shows how to pass and access props to a functional component.

import React from 'react' ;                       
import ReactDOM from 'react-dom' ; 

function Rainbow( props ) {                      // observe the change here you need to pass props as an argument
         return <h1> User passed {props.color} color as a prop </h1>;      // this keyword not necessary
}
ReactDOM.render(<Rainbow color = "Green" />,document.getElementById('root'));

Did you expect the same output , yes you are right again , but there's a small twist. The above code outputs -> User passed Green color as a prop . Gotcha !!

As you can deduce that, there is a clear difference in the syntax. Functional Component just returns a JSX but Class Component extends React.Component class and contains render() method.

You can still ask me that, as both components rendered the same output, why do we even need 2 types ? 🤨

These are some key points which are to be known, to choose which component is best in different scenario's.

1) Class Components are also known as Stateful Component.

It has a total of 7 lifecycle methods that will run for every component if defined. Namely, componentWillMount , componentDidMount , componentWillRecieveProps , shouldComponentUpdate , componentWillUpdate , componentDidUpdate & componentWillUnmount in 3 different phases - Mounting , Updating , Unmounting.

In which popular one's are componentDidMount , componentDidUpdate & componentWillUnmount.

So, whenever there is logic and state to be handled, use class component.

2) Functional or Stateless Component

There is no logic or state involved in functional component. It simply accepts information through props and displays it in a certain form. This type of component purely takes responsibility of rendering user interfaces.

In conclusion, Functional Components are used more, as they do not contain or maintain state, separates logic and presentation, lastly easier to read and debug.

Let me know which type of component you prefer and why ? linkedIn & instagram