|
Functional Components |
Class Components |
|
Functional components are simple JavaScript functions that take props as arguments and return JSX. |
A class component extends from React.Component and the render function return the React element. |
|
It is known as a stateless component since it does not have any state |
A class component can also be referred to as a stateful component |
|
A functional component does not respond to a lifecycle event |
Lifecycle events can be handled by class components |
|
A constructor is not supported by functional components |
Provide a constructor for storing state before passing props to the parent class |
|
React provides useState()Hook for handling state functional components. |
It's a bit different for class components. The this keyword is required, along with the setState() function and a constructor. |
|
Comparatively, functional components perform better than class components |
A class component is more complex: it is an instance of React.Component with a constructor. |