Difference between CLASS component and FUNCTIONAL component in React.

Components are essential for building blocks of code in your React application. They enable you to slice the UI into reusable pieces that can be reused and worked with independently.

Class Component.

The class component, a stateful/container component, is a normal ES6 class that extends the component class of the React library. It is called a stateful component because it controls how the state changes and the implementation of the component logic. Also, they can use all the different phases of a React lifecycle method.

Before the advent of React Hooks, the class component was the only option to create a dynamic and reusable component because it gave us access to lifecycle methods and all React functionalities.

Functional Component.

Functional components are simply JavaScript functions. Before the arrival of hooks in React 16.8 let’s say, they were mostly referred to as stateless or presentational components because then they only accepted and returned data to be rendered to the DOM.

Before, the class component was the only option to pierce further React features similar to state and React lifecycle methods. However, with hooks, you can implement state and other React features, and, most importantly, you can write your entire UI with functional components.

With hooks, coding components in React is more straightforward. React has two most commonly used hooks: the state (useState) and the effect (useEffect) hooks.

Finaly, if you are new to React, you can learn more about React Hooks Here.