Function vs Class Components in React

by Mcs July 2, 2025

React offers two primary ways to create components: Function Components and Class Components. While both achieve the same goal of rendering UI, they differ significantly in their syntax, state management, and lifecycle handling.

React lets you create components in two main ways:

Function Components (modern, recommended)
Class Components (older, still supported)

1. Function Components

Function components in React are JavaScript functions that accept props (properties) as an argument and return a React element, which is typically JSX. They are a fundamental building block for creating user interfaces in React.

Syntax:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

Since React 16.8+, function components can use hooks like useState, useEffect, etc.

Simplicity and Readability:

They are often simpler and more concise than class components, especially for components that primarily focus on rendering UI based on props.

Props:

Function components receive data from their parent components through the props object, which is passed as an argument to the function. These props are read-only.

JSX Return:

The core purpose of a function component is to return valid JSX, which describes the UI that should be rendered.

State and Lifecycle with Hooks:

While traditionally considered "stateless," the introduction of React Hooks (like useState for managing state and useEffect for handling side effects and lifecycle-like behavior) allows function components to manage state and perform actions that were previously exclusive to class components.

Modern React Standard:

With the advent of Hooks, function components have become the preferred and recommended way to write components in modern React development, offering a more functional and often more performant approach.

With State (using Hooks):

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</>
);
}

2. Class Components

Older way using ES6 class syntax and lifecycle methods.

Class components in React are a way of defining components using ES6 JavaScript classes. They extend React.Component and have the ability to manage their own internal state and utilize lifecycle methods.

Syntax:

import React, { Component } from 'react';

class Greeting extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

ES6 Classes:

They are defined as JavaScript classes that inherit from React.Component

State Management:

Class components can hold and manage their own internal state using this.state and update it using this.setState(). This allows for dynamic and interactive UI elements.

Lifecycle Methods:

They provide a set of built-in methods, known as lifecycle methods (e.g., componentDidMount, componentDidUpdate, componentWillUnmount), which are called at different stages of a component's existence. These methods offer control over component behavior, such as data fetching or cleaning up resources.

render() Method:

A class component must include a render() method, which is responsible for returning the JSX (or other React elements) that will be rendered to the DOM.

this Keyword:

Props and state within a class component are accessed using the this keyword (e.g., this.props.someProp, this.state.someState).

While class components were the primary way to build stateful components in React before the introduction of Hooks, functional components with Hooks are now the recommended approach for new development due to their conciseness and flexibility. However, understanding class components is still valuable for working with older codebases or specific use cases like error boundaries.