Differences between Functional Components and Class Components in React - GeeksforGeeks

29 Mar, 2022
Make a counter app that will increase the number of counts as users click on the “Add” button using Functional and Class components.
Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.
Syntax:
const Car=()=> {
  return <h2>Hi, I am also a Car!</h2>;
}
Example:
Javascript
import React, { useState } from "react";  const FunctionalComponent=()=>{    const [count, setCount] = useState(0);      const increase = () => {        setCount(count+1);    }      return (        <div style={{margin:'50px'}}>            <h1>Welcome to Geeks for Geeks </h1>            <h3>Counter App using Functional Component : </h3>          <h2>{count}</h2>            <button onClick={increase}>Add</button>        </div>    )}      export default FunctionalComponent;
 Output:
Class Component: This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).
Syntax:
class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}
Example:
Javascript
import React, { Component } 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;
Output:
Hooks are a new addition to React 16.8. They let you use state and other React features without writing a class.
In the above example, for functional components, we use hooks (useState) to manage the state. If you write a function component and realise you need to add some state to it, previously you had to convert it to a class component. Now you can use a Hook inside the existing function component to manage the state and no need to convert it into the Class component. Instead of Classes, one can use Hooks in the Functional component as this is a much easier way of managing the state. Hooks can only be used in functional components, not in-class components.
Functional Components vs Class Components:
Hooks can be easily used in functional components to make them Stateful.
example: const [name,SetName]= React.useState(‘ ‘)
It requires different syntax inside a class component to implement hooks.
example: constructor(props) {
   super(props);
   this.state = {name: ‘ ‘}
}
shubhamyadav4
simranarora5sos
vaibhavjoshi8
xggrjpzot8i9qz6nfag3shf6gzrq31yds32mogh4
react-js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
File uploading in React.js
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?