Difference Between Functional Component and Class-Based Component in ReactJS

Hire Reactjs Developers

In this post, we shall discuss how functional components are different from class-based components and why the functional component is better for Reactjs app development. 

The world of React App Development has two different components – one uses a function, and the other uses a class. With this article, we intend to help you understand the difference between class and functional components and why to use functional instead of class components. 

So, let’s begin!

Majorly, there are two components of React, which are:

  • Functional Components 
  • Class Components

What are Functional Components? 

  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 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, useEffect) to intend the React lifecycle. 

import React from “react”;

const Person = props => (

  <div>

    <h1>Hello, {props.name}</h1>

  </div>

);

export default Person;

Click to know “How to use ReactJS with Webpack 4, Babel 7, and Material Design”

What are Class Components? 

Hire React Developers
  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 (

      <div>

        <h1>Hello Person</h1>

      </div>

    );

  }

}

export default Person;

Differences Between Functional and Class Components in Detail

Reactjs Development
  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 <h1>Hello, world</h1>; };

import React from “react”;
function FunctionalComponent() { return <h1>Hello, world</h1>; }

import React, { Component } from “react”;
class ClassComponent extends Component {
render() { return <h1>Hello, world</h1>; }
}

import React from “react”;
class ClassComponent extends React.Component {
render() { return <h1>Hello, world</h1>; }
}

  1. 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 ( <div> <p>count: {count}</p> <button onClick={() => setCount(count + 1)}>Click</button> </div> );
};

Here is the handling state in class components:

class ClassComponent extends React.Component {
constructor(props) {
super(props); 

this.state = { count: 0 }; 

}
render() {
return ( <div> <p>count: {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click </button> </div> );
}
}

  1. Passing Props

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

<Component name=”ABC” />

const FunctionalComponent = ({ name }) => { return <h1>Hello, {name}</h1>; };

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

const FunctionalComponent = (props) => { return <h1>Hello, {props.name}</h1>; };

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

class ClassComponent extends React.Component {
render() {
const { name } = this.props;
return <h1>Hello, { name }</h1>;
}
}

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

  1. Methods of Lifecycle 

On Unmounting 

const FunctionalComponent = () => {
React.useEffect(() => {
return () => { console.log(“Bye”); };
}, []);
return <h1>Bye, World</h1>;
};

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 <h1>Bye, World</h1>; }
}

On Mounting 

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

const FunctionalComponent = () => {
React.useEffect(() => {
console.log(“Hello”);
}, []);
return <h1>Hello, World</h1>;
};

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 <h1>Hello, World</h1>; }
}

Why Use Functional Components Over Class Components? 

Functional vs 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 the 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, for the ReactJS app developers, 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.

Subscribe to get regular content updates, and offers

Also Read This

Best Offshore Development Team

Cost-Benefit Analysis of Outsourcing

Offshore Development Centre

Offshore Development Center in India

ODC Centre

HOW IT WORKS?