Note: This blog was originally published on 1st September 2021 and updated on 22nd March 2023. 

Quick Summary: ReactJS has two types of components: class components and functional components. Class components are heavier and have state and lifecycle methods, while functional components are simpler and recommended for stateless UI components. Functional components can now also handle state and lifecycle methods with React hooks.

Introduction:

In React, there are two types of components: class components and functional components. These two types of components serve different purposes and have different characteristics, which can make it difficult to decide which type of component to use in a given situation. The main difference between class components and functional components in React is that class components have the ability to manage state and lifecycle methods, while functional components do not.

Class Components:-

• Extend from React. Component.
• Are also known as stateful components.
• Can respond to lifecycle events.
• Maintain state information.
• Support props.
• Require a Constructor to store state before they can be used to pass props to the parent class.
• Require a render function that returns an HTML element.

Functional Components:-

• Don’t Extent from React. Component.
• Are known as stateless components.
• Don’t respond to lifecycle events.
• Don’t maintain state information.
• Will accept any type of data{props}
  Don’t support a constructor.
• Return HTML elements or nothing.
• Support React 16.8 Hooks

In this article, we’ll explore the main differences between class components vs functional components in React, and provide some guidance on when to use each type of component.

So, let’s begin!

What are Functional Components?

In React, a functional component is a JavaScript function that returns a JSX element. Functional components are used to create reusable components in a React application. They are simpler and easier to write than class components and do not have the ability to manage state or lifecycle methods.

Here is an example of a functional component in React:

function Welcome(props) {
return

Hello, {props.name}

;
}

In this example, the Welcome function is a functional component that takes in a props object as an argument and returns a JSX element. The JSX element in this case is an h1 element that displays a greeting to the user.

Functional components are often used when the component does not need to manage state or lifecycle methods. They are simpler and easier to write than class components and can make your code more readable and maintainable.

1. Functional components are basic JavaScript functions that are usually arrow functions but are also created with the regular function keyword.
2. It is also called stateless or dumb components. The reason is that they simply accept data and display it in some form. This component is mainly responsible for rendering UI. 
3. Functional components don’t use any render method, instead, it uses to return to render the JSX. 
4. Mainly responsible for UI and are usually presentational only. For instance, the button component.
5. If you are not making use of React state, you must use functional components.
6. These components can accept and use props.
7. Functional components don’t have their own React lifecycle methods, these components can use React Hooks (useState, use effect) to intend the React lifecycle. 

import React from "react";
const Person = props => (

);
export default Person;

Recommended Read: 15 Advantages of ReactJS for Application Development

What are Class Components?

In React, a class component is defined using a class that extends the React.Component base class. Class components have the ability to manage state and lifecycle methods, which allow them to control the component’s behavior over time.

Here is an example of a class component in React:

class Welcome extends React.Component {
render() {
return

;
}
}

1. Also called ‘Smart’ or ‘Stateful’ components as it implements state and logic. 
2. Class components use the ES6 class and extend the ‘component’ class in React. 
3. Access pass props down to class components with this.props. 
4. You can use the React lifecycle methods inside class components. For e.g.: componentDidMount. 

import React, { Component } from "react";
class Person extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  render() {
    return (

    );
  }
}
export default Person;

Class Components Vs Functional Components: Major Differences

1. Rendering JSX

The primary difference between both these terms is the syntax. A functional component is just a plain JS function that returns JSX. On the other hand, a class component is a JS class that extends React.component that has a render method. 

import React from "react";
const FunctionalComponent = () => { return

Hello, world

; };

import React from "react";
function FunctionalComponent() { return

Hello, world

; }

import React, { Component } from "react";
class ClassComponent extends Component {
  render() { return

Hello, world

; }
}

import React from "react";
class ClassComponent extends React.Component {
  render() { return

Hello, world

; }
}

2. Handling State

Handling state was only doable in class and not a functional component until React 16.8 React Hook was introduced. 

Here is the handling state in functional components:

const FunctionalComponent = () => {
  const [count, setCount] = React.useState(0);
  return (

  );
};

Here is the handling state in class components:

class ClassComponent extends React.Component {
  constructor(props) {
  super(props); 
    this.state = { count: 0 }; 
  }
  render() {
    return (

    );
  }
}

3. Passing Props

Here is how passing props are written in both the functional and class components. 

const FunctionalComponent = ({ name }) => { return

Hello, {name}

; };

Inside the functional component, we will pass “props” as an argument. 

const FunctionalComponent = (props) => { return

Hello, {props.name}

; };

We will use props.name instead of the name here. 

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return

Hello, { name }

;
  }
}

Use ‘this’ to refer to the props since it is in the class. Besides, we will use destructuring to get ‘name’ inside props.

4. Methods of Lifecycle

On Unmounting 

const FunctionalComponent = () => {
  React.useEffect(() => {
    return () => { console.log("Bye"); };
  }, []);
  return

Bye, World

;
};

You can also use a ‘useState’ hook for unmounting. Return a function that runs on unmounting inside the ‘useEffect’ function. This becomes essential when you need to clean up the subscriptions so that the memory leak can be avoided. UseEffect ensures that you can write functions for both the mounting and unmounting in the same place. 

class ClassComponent extends React.Component {
  componentWillUnmount() { console.log("Bye"); }
  render() { return

Bye, World

; }
}

On Mounting

After the first render is complete, you can call the lifecycle method ‘componentDidMount.’ 

const FunctionalComponent = () => {
  React.useEffect(() => {
    console.log("Hello");
  }, []);
  return

Hello, World

;
};

You will have to use the ‘useEffect’ hook with the second argument of [ ]. The second argument of the ‘userState’ hook is usually an array of a state that modifies. Only the selected changes will have the useEffect. 

class ClassComponent extends React.Component {
  componentDidMount() {
    console.log("Hello");
  }
  render() { return

Hello, World

; }
}

Why Use Functional Components Over Class Components?

There are different reasons why functional components are better than class components for Reactjs development, and here are the most prominent ones:

1. It is a simple JS function that simply returns HTML UI
2. Accept properties in function and return HTML
3. Functional gives the solution with or without using states
4. No render method used
5. Defined using arrow functions but can be created with the regular function keyword 

On the other hand, the class component has quite a complex UI logic. Also, it must have a render() method returning HTML. 

Read our other post on Reasons to choose Reacjs for Enterprise App Development

Conclusion

There are visible advantages and disadvantages in both styles – functional and class. However, functional components are much preferred over class components. A functional component is more uncomplicated and easy to develop, test, and understand. On the other hand, class components can be a little confusing as there are multiple usages of ‘this’ required. Hence, functional components can be a little messy and much cleaner comparatively. 

Need help setting up a dedicated team of developers in India? At Your Team In India, we have a pool of certified Reactjs engineers. Connect with us our business head now and get a free consultation.

Frequently Asked Questions (FAQs)

Q: What is difference between class component and functional component?

The main difference between class components and functional components in React is that class components have the ability to manage state and lifecycle methods, while functional components do not.

Q: When should we use a functional component vs a class component?

In general, you should use a functional component when you don’t need to manage a state or perform lifecycle methods, and you should use a class component when you do need to manage a state or perform lifecycle methods.

Q: Which is faster class component or functional component?

Functional components are generally faster to render than class components because they don’t have the overhead of a class and the associated lifecycle methods.