Difference between Class components and Functional components in React.

Introduction

Before 2018, To manage state and lifecycle, we had to use react class components. React functional components were used for simple functions. At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks. With the help of hooks, now we can do state management in react functional components.

Let’s see how react class and functional components are different with the use of react hooks.

Example

Class component example with simple counter up code

Functional component example with simple counter up

As we can see react functional component requires less number of code comparing to class component. Functional components are same as java script functions and it is easy to understand.

Opinion

React functional component is much easier to code and handle complex projects. Now days, we can implement lifecycle methods inside functional components using hooks.

That’s it!

I hope this post will helpful for someone to take simple understand about difference between class and functional components.