ref – https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

Functional Component

A functional component is just a plain JavaScript function which:
– accepts props as an argument
– returns a React element.
– DOES NOT have state. Thus, you cannot use setState()
– No lifecycle methods

If you NEED a state in your component you will either need to:

1) create a class component or
2) you lift the state up to the parent component and pass it down the functional component via props.

So…. why should I use functional components at all?

– Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
– less code
– easier to separate container and presentation components.
– When we write presentation component that does not have its own state, or need lifecycle hooks.

Class Component

A class component requires you to extend from React.Component and create a render function which returns a React element. By extending from React.Component, you can over-ride lifecycle methods.