In this article, I’m going to be explaining what functional components are and when you should use them in your applications! First, I’ll be doing a quick overview of class components. Then, we’ll jump into functional components.

---

What Are Class Components?

Class components are sometimes categorized as smart or stateful components because they implement logic and state. They’re ES6 classes and contain the Component class in React. Lifecycle methods can be used inside these components ( componentDidUpdate, componentDidMount, etc.). Class components are a bit more complex because you have to keep track of not only lifecycle methods but also their side effects such as re-rendering, and data flow management.

import React, { Component } from "react";

	class Planet extends Component {
	 state = {
	  message: ''
	}
	 render() {
	    return (
	      <div>
	        <h1>Hello from Planet!</h1>
	      </div>
	    );
	  }
	}

	export default Planet;

---

Functional Components

Functional components are JavaScript (or ES6) functions that return React elements. They’re a bit easier to understand because there isn’t as much going on as there would be in a class component. They can also be written as a simple JS functions or as an arrow function using ES6 syntax, and their props are passed in as arguments (if any).

#reactjs #javascript #react #coding #programming