Differences between Class and Function Components

So far, we have seen how we can define a class component by extending React.Component, and a function component that can use the power of ES6 to define a concise body with an implicit return statement to create a simple component.

Apart from sheer size, though, there are also other differences between the two that we need to consider while deciding to create a component using either of the following methods. Let's discuss the pointers one by one.

Syntax

Let's consider a simple component that receives a name as a value from a parent component and shows a hello message.

The following code is from the Hello component that is defined as a class component:

import React, { Component } from "react";
export class Hello extends Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

The same component can be written as a functional...