Set the difference between React class component and React functional component

Front-end frameworks and libraries are increasingly becoming an integral component of the current web development stack. React.js is a front-end package that has progressively become the JavaScript community's go-to framework for modern web development.

What is React?

React is a JavaScript library for creating user interfaces that are declarative, fast, and customizable. It's the letter 'V' in MVC. 

ReactJS is an open-source, component-based front-end library that is only responsible for the application's display layer and React developed by Facebook.

One of React's fundamental building pieces is the component. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.

 There are two methods for creating components in React: 

• Functional components
• Class components 

Functional Components: Functional components are simply javascript functions. We can create a functional component in React by writing a javascript function. These functions may or may not receive data as parameters

const Demo=()=>
{
    return <h1>Hello World!</h1>;
}

Class Components: The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class component. We can use JavaScript ES6 classes to create class-based components in React.

class Demo extends React.Component
{
    render(){
          return <h1>Hello World!</h1>;
    }
}

Before we go any further, it's important to understand why functional components were established to replace the class component. According to the React team, the following are the reasons for including hooks in functional components:

• It is difficult to reuse stateful logic between class components.
• In the class component, complex components are difficult to grasp.
• Class confuses both humans and machines.