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 => (

  

);

export default Person;

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

What are Class Components? 

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;

Differences Between Functional and Class Components in Detail

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 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.

The post Difference Between Functional Component and Class-Based Component in ReactJS appeared first on Your Team In India.