Differences between Functional Components and Class Components in React

Make a counter app that will increase the number of count 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:

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

Example:

Javascript



filter_none

edit
close

play_arrow

link
brightness_4
code

import React ,{useState} from "react";
  
function FunctionalComponent(){
    const[count , setCount]=useState(0);
  
    function increase(){
        setCount(count+1);
    }
  
    return (
        <div style={{margin:'50px'}}>
            <h1>Welcome to Geeks for Geeks </h1>
            <h3>Counter App using Functional Componenet : </h3>
            <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
}
  
export default FunctionalComponent;

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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 Componenet : </h3>
               <h2> {this.state.count}</h2>  
               <button onClick={this.increase}> Add</button>
  
            </div>
        )
    }
}
  
export default ClassComponent;

chevron_right


Output:

Hooks are a new addition in 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 state. If you write a function component and realize 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 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 state. Hooks can only be used in functional components, not in-class components.

Functional Components vs Class Components:

                         Functional Components                                            Class Components                
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element.
There is no render method used in functional components. It must have the render() method returning HTML
Also known as Stateless components as they simply accept data and display them in some form , that is they are mainly responsible for rendering UI. Also known as Stateful components because they implement logic and state.
React lifecycle methods (for example, componentDidMount) cannot be used in functional components. React lifecycle methods can be used inside class components (for example, componentDidMount).

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.