
Table of Contents
Table of Contents
Note: This blog was originally published on 1st September 2021 and updated on 22nd March 2023.
Quick Summary: ReactJS has two types of components: class components and functional components. Class components are heavier and have state and lifecycle methods, while functional components are simpler and recommended for stateless UI components. Functional components can now also handle state and lifecycle methods with React hooks.
Introduction:
In React, there are two types of components: class components and functional components. These two types of components serve different purposes and have different characteristics, which can make it difficult to decide which type of component to use in a given situation. The main difference between class components and functional components in React is that class components have the ability to manage state and lifecycle methods, while functional components do not.
Key Takeaways
- Class components have state and lifecycle methods, while functional components are simpler and preferred for stateless UI.
- Functional components can handle state and lifecycle methods with React hooks.
- Class components use “this” keyword, while functional components pass props and state as arguments.
- Functional components are easier to test and maintain.
- React hooks allow functional components to handle side-effects and manage state in a declarative way.
Class Components:-
- Extend from React. Component.
- Are also known as stateful components.
- Can respond to lifecycle events.
- Maintain state information.
- Support props.
- Require a Constructor to store state before they can be used to pass props to the parent class.
- Require a render function that returns an HTML element.
Functional Components:-
- Don’t Extent from React. Component.
- Are known as stateless components.
- Don’t respond to lifecycle events.
- Don’t maintain state information.
- Will accept any type of data{props}
Don’t support a constructor. - Return HTML elements or nothing.
- Support React 16.8 Hooks
In this article, we’ll explore the main differences between class components vs functional components in React, and provide some guidance on when to use each type of component.
So, let’s begin!
What are Functional Components?
In React, a functional component is a JavaScript function that returns a JSX element. Functional components are used to create reusable components in a React application. They are simpler and easier to write than class components and do not have the ability to manage state or lifecycle methods.
Here is an example of a functional component in React:
function Welcome(props) {
return
Hello, {props.name}
;
}
In this example, the Welcome
function is a functional component that takes in a props
object as an argument and returns a JSX element. The JSX element in this case is an h1
element that displays a greeting to the user.
Functional components are often used when the component does not need to manage state or lifecycle methods. They are simpler and easier to write than class components and can make your code more readable and maintainable.
- Functional components are basic JavaScript functions that are usually arrow functions but are also created with the regular function keyword.
- It is also called stateless or dumb components. The reason is that they simply accept data and display it in some form. This component is mainly responsible for rendering UI.
- Functional components don’t use any render method, instead, it uses to return to render the JSX.
- Mainly responsible for UI and are usually presentational only. For instance, the button component.
- If you are not making use of React state, you must use functional components.
- These components can accept and use props.
- Functional components don’t have their own React lifecycle methods, these components can use React Hooks (useState, use effect) to intend the React lifecycle.
import React from "react";
const Person = props => (
Hello, {props.name}
);
export default Person;
Recommended Read: 15 Advantages of ReactJS for Application Development
What are Class Components?

In React, a class component is defined using a class that extends the React.Component
base class. Class components have the ability to manage state and lifecycle methods, which allow them to control the component’s behavior over time.
Here is an example of a class component in React:
class Welcome extends React.Component {
render() {
return
Hello, {this.props.name}
;
}
}
In this example, the Welcome
class is a class component that extends the React.Component
base class. The render
method returns a JSX element, which is an h1
element that displays a greeting to the user.
Class components are often used when the component needs to manage state or lifecycle methods. They are more complex than functional components and have more code, but they provide more flexibility and control over the component’s behavior.
- Also called ‘Smart’ or ‘Stateful’ components as it implements state and logic.
- Class components use the ES6 class and extend the ‘component’ class in React.
- Access pass props down to class components with this.props.
- You can use the React lifecycle methods inside class components. For e.g.: componentDidMount.
import React, { Component } from "react";
class Person extends Component {
constructor(props){
super(props);
this.state = {
myState: true;
}
}
render() {
return (
Hello Person
);
}
}
export default Person;
Class Components Vs Functional Components: Major Differences

1. Rendering JSX
The primary difference between both these terms is the syntax. A functional component is just a plain JS function that returns JSX. On the other hand, a class component is a JS class that extends React.component that has a render method.
import React from "react";
const FunctionalComponent = () => { return
Hello, world
; };
import React from "react";
function FunctionalComponent() { return
Hello, world
; }
import React, { Component } from "react";
class ClassComponent extends Component {
render() { return
Hello, world
; }
}
import React from "react";
class ClassComponent extends React.Component {
render() { return
Hello, world
; }
}
2. Handling State
Handling state was only doable in class and not a functional component until React 16.8 React Hook was introduced.
Here is the handling state in functional components:
const FunctionalComponent = () => {
const [count, setCount] = React.useState(0);
return (
count: {count}
);
};
Here is the handling state in class components:
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
count: {this.state.count} times
);
}
}
3. Passing Props
Here is how passing props are written in both the functional and class components.
const FunctionalComponent = ({ name }) => { return
Hello, {name}
; };
Inside the functional component, we will pass “props” as an argument.
const FunctionalComponent = (props) => { return
Hello, {props.name}
; };
We will use props.name instead of the name here.
class ClassComponent extends React.Component {
render() {
const { name } = this.props;
return
Hello, { name }
;
}
}
Use ‘this’ to refer to the props since it is in the class. Besides, we will use destructuring to get ‘name’ inside props.
4. Methods of Lifecycle
On Unmounting
const FunctionalComponent = () => {
React.useEffect(() => {
return () => { console.log("Bye"); };
}, []);
return
Bye, World
;
};
You can also use a ‘useState’ hook for unmounting. Return a function that runs on unmounting inside the ‘useEffect’ function. This becomes essential when you need to clean up the subscriptions so that the memory leak can be avoided. UseEffect ensures that you can write functions for both the mounting and unmounting in the same place.
class ClassComponent extends React.Component {
componentWillUnmount() { console.log("Bye"); }
render() { return
Bye, World
; }
}
On Mounting
After the first render is complete, you can call the lifecycle method ‘componentDidMount.’
const FunctionalComponent = () => {
React.useEffect(() => {
console.log("Hello");
}, []);
return
Hello, World
;
};
You will have to use the ‘useEffect’ hook with the second argument of [ ]. The second argument of the ‘userState’ hook is usually an array of a state that modifies. Only the selected changes will have the useEffect.
class ClassComponent extends React.Component {
componentDidMount() {
console.log("Hello");
}
render() { return
Hello, World
; }
}
Why Use Functional Components Over Class Components?

There are different reasons why functional components are better than class components for Reactjs development, and here are the most prominent ones:
- It is a simple JS function that simply returns HTML UI
- Accept properties in function and return HTML
- Functional gives the solution with or without using states
- No render method used
- Defined using arrow functions but can be created with the regular function keyword
On the other hand, the class component has quite a complex UI logic. Also, it must have a render() method returning HTML.
Read our other post on Reasons to choose Reacjs for Enterprise App Development
Conclusion
There are visible advantages and disadvantages in both styles – functional and class. However, functional components are much preferred over class components. A functional component is more uncomplicated and easy to develop, test, and understand. On the other hand, class components can be a little confusing as there are multiple usages of ‘this’ required. Hence, functional components can be a little messy and much cleaner comparatively.
Need help setting up a dedicated team of developers in India? At Your Team In India, we have a pool of certified Reactjs engineers. Connect with us our business head now and get a free consultation.
Frequently Asked Questions (FAQs)
Q: What is difference between class component and functional component?
The main difference between class components and functional components in React is that class components have the ability to manage state and lifecycle methods, while functional components do not.
Q: When should we use a functional component vs a class component?
In general, you should use a functional component when you don’t need to manage a state or perform lifecycle methods, and you should use a class component when you do need to manage a state or perform lifecycle methods.
Q: Which is faster class component or functional component?
Functional components are generally faster to render than class components because they don’t have the overhead of a class and the associated lifecycle methods.