|
Class component |
Functional component |
| Class-based Components uses ES6 class syntax. | Functional Components are simpler comparing to class-based functions.
|
| The lifecycle methods can be used. | Functional Components mainly focuses on the UI of the application, not on the behavior. |
| More code to write. | Easy to write. |
| Used for presenting static data. | Used for dynamic source of data. |
| Can’t handle fetching data. | Handles any data that might change. |
| It must have a render() method. | It doesn’t have a render() method. |
| Here,React lifecycle methods (like componentDidMount, etc.) are used | React hooks are there to be as a better alternative to the traditional React lifecycle methods. |
| For e.g:
const [name,SetName]= React.useState(‘ ‘) |
For e.g:
constructor(props) { super(props); this.state = {name: ‘ ‘} }
|
| In functional components to make them Stateful, Hooks can be easily used. | In class component to implement hooks,It requires different syntax. |