What is the difference between Functional and Class Components? | Tekolio

We generally write our code in React using one of the two components that are either functional or class components, but we don’t know the actual difference between them?

In this blog, we will uncover their differences and also which one is superior and why?

What is a component?

Through this, error spotting and debugging becomes child play as we can deal with that separately without disturbing the rest of the code.

They are also reusable, as in you can easily use the same piece of code on any page or the same page without writing it again for that area. Simply put, it follows the well-known DRY principle.

State and Props

So, what is the difference between the two?

Difference between State and Props

Props are states that can pass its value from the parent Component to the Child Component

Let’s understand the difference between them and how they are called within the component(s).

Now how are they called inside the child component?

There is another way of calling props in the child component and that is by destructuring it.

Let’s look at the differences between them in tabular form

Now that we have understood the differences between props and states, let’s continue our topic and find out the differences between the functional and class components.

Difference between the functional and class components

Functional Components

Functional Components were called stateless Components as they did not have a way that can deal with state and were best suited for passing props and for developing the UI.

After the introduction of Hooks, they can deal with states and lifecycle methods, as they do not have their lifecycle methods.

Syntax

import React from 'react'

const App = () => {
return (
<>

</>
)
}

export default App

Class Components

They use the render methods and can even extend the class components.

They usually write “ this” before any props or state and have their lifecycle methods.

Syntax

import React, { Component } from 'react'

export class App extends Component {
render() {
return (
<>

</>
)
}
}

export default App

As we have a basic idea of what functional and class components are. We will be seeing it in tabular form too -

Let’s see them in action

Ex — Making a Counter that increases and decreases itself when the button is clicked

Using Functional Components

import React, {useState} from 'react';
const App = () => {

const[Input, setInput] = useState(0)
const Increase = () => {
setInput(Input + 1);
}

const Decrease = () => {
if(Input > 0) {
setInput(Input - 1);
}else{
setInput(0);
alert("Reached minimum value")
};
}
return(
<>
<div className="main">
<div className="text_area">{Input}</div>
<br /><br/>
<button className="one" onClick={Increase}>Increase</button>
<button className="two" onClick = {Decrease}>Decrease</button>
</div>
</>
)
}
export default App;

You can see the final result here

Using Class Components

import React from "react";

class ClassComponent extends React.Component{
constructor(){
super();
this.state={
count :0
};
this.increase=this.increase.bind(this);
}

increase(){
this.setState({count : this.state.count +1});
}

render(){
return (
<div style={{margin:'50px'}}>
<h1>Welcome to Geeks for Geeks </h1>
<h3>Counter App using Class Component : </h3>
<h2> {this.state.count}</h2>
<button onClick={this.increase}> Add</button>
</div>
)
}
}

export default ClassComponent;

The output will remain the same as this

Conclusion

Though I would recommend the functional components as they are simple JavaScript codes that use ES6 classes like arrow functions, destructuring, etc, making it even easier to write and debug code.

While on the other hand, class components may be a bit confusing with their use of ‘this’ word with every state and props and also when we have to change the state.

And on top of that, the React team is also working on functional components to make it even better in the future but that doesn’t mean that they are boycotting class components.

Lastly, it’s up to you to decide whether to use class components or functional components or you can even write codes in React without using JSX.

Originally published at https://tekolio.com on November 2, 2021.

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.