Functional Components Class Components
Extend from React. Component Don’t extend from React. Component
Stateless components Stateful components
Do not have any Lifecycle Methods; uses React hooks instead introduced in React in version 16.8 Has different life cycle methods for invoking different phases of the component lifecycle
Fewer lines of code Lengthier code lines
Don’t maintain state information Maintains state information
Do not use any render method Use render() method
Functional components eliminate the use of the “this” keyword Class components use the “this” keyword
Don’t support a constructor Require a constructor, as the state needs to be stored
Support React 16.8 Hooks Don’t Support React 16.8 Hooks
Functional components are more efficient Class components are a little inefficient
Uses React Hooks to manage state It has built-in state management using this. state
Props are passed as a parameter to the function Props are accessed through this. props
Help developers to use best practices Easier to cause performance issues
React requires less work to render these components. React requires more work to render these components.
Easier to read and test More challenging to read and test
Uses less memory Uses more memory
Supports inheritance design patterns Promotes composition