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.