Functional vs Class Components.

3 min readNov 17, 2020

Introduction

Components play a huge part in React. There are two types of components that exists in React. Class Components and Functional Components. We will find out more information about those two as we go along in our journey, but just know right now its different ways you can use both types of components its simply just how you wanna do it.

Functional.

Functional components are functions that returns html. They accept something called props in a function and returns JSX. Solutions can also be given without state in functional components and you will not need a render as you would in a class.

State.

In a functional component you can not use set state. If you need state in your component you will have to create a class Component. State can be used in a class component so therefore you can use set state in a class component.

Class.

A class component is ES6 classes that extends component from the react library. These can also be called stateful because as i said before you can use state in a class component. It needs a render() method for returning html. Props can also be accessed with this.props in class components.

Props.

Props are your key path to get things on the screen through components in react. You can pass down props from parent components and you can call them by this.props if its a class and you just start off with props if it is a functional component.

Source.

If wanna deeper understanding with components I will put down some links from some amazing sources I found. Understanding components can be pretty frustrating at first but if you keep going back at it eventually it will click hopefully i led you in the right direction.