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...