See this picture. I am too much late but i will help the others.

Source of Image is Udemy Course

Functional Components:

1. These components are stateless components and does not have react life-cycle methods.
2. These components can be used for presentation purpose.
3. These components can be easy to debug,test.

Class Components:

1. These components are statefull components and can support react life-cycle methods by extending react components.
2. These components can be used when you want to create methods , state for an component.

Functional Components

A functional component is basically a JavaScript function which returns a React element. Its accepts props as argument and returns valid JSX

Class Components

Class Components are more complex than functional components including constructors, life-cycle methods, render( ) function and state (data) management. Class components are ES6 classes.

Benefits of using Functional Components

1. Functional components are easy to test.
2. It can have better performance.
3. Functional components are easy to debug.
4. It end up with less code.
5. It help you to use best practices.
6. Functional components can reduce coupling.

For more click here

Functional Component : Using simple javascript function to define component. it uses props as input(stateless)

Class Component : Using class to define a component(state Component)

Besides the obvious difference in the syntax, you need use a class component instead of a function component when your component needs to store and manipulate its own internal state or when you need access to the several lifecycle methods like componentDidMount, etc to perform network operations, manipulate the DOM, interact with third-party libraries, etc

I recommend you to take a look a the React docs (https://reactjs.org/docs/react-component.html) about the React.Component API to find a detailed description of all the lifecycle methods and the state API.

1-Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks

2-You end up with less code

3-They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component

4-The React team mentioned that there may be a performance boost for functional component in future React versions

In the world of react there are two ways to write components where one uses a function and the other uses a class. Following example shows the two ways you can write the same component

Functional component

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

Class component

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

With Recent releases of React the choice to when to write when depends on the developer preferences.There are pros and cons in both styles but functional components are taking over modern React in the foreseeable future. Since everything we can do with class components are also possible with the functional components now a days also it can be written shorter and simpler, which makes it easier to develop, understand, and test

React team is supporting more React hooks for functional components that replace or even improve upon class components. They mentioned in prior releases that they will make performance optimizations in functional components by avoiding unnecessary checks and memory allocations. And as promising as it sounds, new hooks are recently introduced for functional components such as useState or useEffect while also promising that they are not going to obsolete class components but recommend a gradual adoption strategy.

1. When react was introduced, only class components were used to re-render the component when state changes and functional components were treated as presentational components as they don't have state access.

2. From react 16.8 version update, with introduction to hooks, now functional components also have state access.

3. In the class component, managing state is performed in a single state object but in function we can create as many hooks as we want.

4. In the class component, when re-render happens, it will invoke methods but in functional components when state update, it re-create and invoke inner functions if we don't use useCallback and useMemo hooks.

5. Only Class components are used as Error Boundaries

Function component is a Hook Using work and the usestate and any other hook function to use and dynamic data display then some problem for function component in a reactjs

Class Component is an easy way to use for compare to function component and daynamic data update then to easily work. Class component is what state and props use to pass runtime data to a component.