DEV Community

Cover image for What is the difference between Functional and Class Based Component and How to convert one another?

Posted on


What is the difference between Functional and Class Based Component and How to convert one another?

Which is better, Functional or Class Component? or Which one the use? these questions are making the development complicated and sometimes make you regret when you start coding with one and realize that, you need another one. I certainly do not have the answer to those questions and usually, when it's time to decide, it all comes to which one you like or you used to code with.

Today, we will go and take these two and compare them detailly, Let's start then.

What is functional based component ?
A functional component is a simple function that returns something, that is all a functional component is, and it's definitely easy to write since it has simple logic which is an input and output, our input is props and output will be whatever we return from this function, straightforward and simple.
What is class based component?
A class component is a simple classes that made up of multiple functions that add functionality to the application, you have to extend a React component when you write these component and it's much more work to write these component.
What is the differences between these two component?
1-)A class component requires you to extend from React Component while functional component does not require that.

Image description

2-)A class component requires to create a render function to return React element, while functional component accepts props as an argument and returns a React element.

Image description

3-) previously only class based components could have state in component, but this is no longer the case since React hooks arrived to rescue functional components, the main difference between these two is how they handle state, state is one of the fundamental element, and it's important to choose which component you will use since it's different handled for two case.

Down below, on the left we see a functional component that has three states and is initialized with the useState hook, each individual variable has its own set function, which means each method has its own individual value, and these methods only affect their own value that they have. Consuming these variables is easy, just place the name of the variables wherever you want to use them in your code, and you all set. On the right we see a class-based component, in a class-based component, we have a constructer that takes props as an argument, in this.state we essentially set an object in it, we don't have any set methods here since we don't use hooks here, we only have variables that initialized and set as key values inside. When it comes to consuming these variables, it's an again different story with the class-based component, you have to use 'this' as a pointer to that variable, instead of the variables name itself, you have to write 'this.variableName', it's a bit more wording that we have to add as an extra.

Image description

Just a quick tip, if you don't want to use this whenever you use variables in your code, you can destructure your variable like down below.

Image description

4-) props are simple property that passed in as an argument, props in functional component is simple and straithforward, you just get the props in functional component and use it as props.variableName.

Image description

On the other hand, it's a bit tricky to use props in class based components, in previous section we saw constructer, and with this constructer we parse props, and one more thing here is whenever we have super call, which basically do is to pass props up to Parent constructer and the parent basically component that we extend the class from, so essentially passing props up to the tree. to consume these props, we just need to write this.props.variableName

Image description

Just a quick note, this in class based component simply pointing towards the instance of this component.
Just a quick tip, if you don't want to use this, just consume it like down below.

Image description

if you have any questions, just comment and will get back to you as soon as possible to answer your questions. and if my explanation helps you to understand the concept, give me a follow or clap, thank you in advance.

My Linked In Link Down Below

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React