Functional vs Class Components in React 16.9

In react there are mainly two component types

1- Class Components

2- Functional Components

In this article, I will explain what is the differences between them and which conditions we need to use. I will start with explaining what does component mean but if you feel comfortable please continue the section 2 below.

Section 1 — What does Component mean?

Components are basically chunks of reusable pieces of view. That shows an element we want to render in the react application. These components can be plain javascript functions or classes.

Let’s begin with simple react component with using simple javascript function.

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
} 

We can use this component any place in our application to show

<h1>Hello, name </h1>

We can use the same structure with class components to show exactly same block of code in application.

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Section 2 — Functional Components

Functional Components