Stateful vs Stateless Components in React

React components can be broadly classified into two categories:

1. Stateful Components
2. Stateless Components

The difference is whether the component manages its own state.

1. Stateful Components

A stateful component is a component that has its own state using hooks like useState (or state in class components).

Since it owns state, it can:

• Store data
• Update data
• Re-render when the data changes
• Respond to user interactions

Example

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

Flow

Step 1

Component renders.

count = 0

UI:

0

Step 2

User clicks

Increment

Step 3

React executes

setCount(count + 1);

which becomes

setCount(1);

Step 4

React updates the state.

count = 1

Step 5

React re-renders the component.

UI:

1

Flow Diagram

Component Renders
        │
        ▼
State Created
        │
        ▼
User Action
        │
        ▼
setState()
        │
        ▼
State Changes
        │
        ▼
React Re-renders

Because this component stores and updates its own state, it is stateful.

2. Stateless Components

A stateless component does not manage its own state.

It simply receives data through props and displays it.

It cannot change its own data unless its parent sends new props.

Example

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

Parent Component

function App() {
  return <Greeting name="Qayyum" />;
}

Flow

Parent renders.

name = "Qayyum"

↓

Passes prop

<Greeting name="Qayyum" />

↓

Child receives prop

function Greeting({ name })

↓

Get Articles Media’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Displays

Hello, Qayyum

The child never changes the value.

It only displays what it receives.

Flow Diagram

Parent
 │
 ▼
Props
 │
 ▼
Child Displays Data

No state.

No updates.

No useState.

Comparison

Stateful Component

function Counter() {
  const [count, setCount] = useState(0);
return (
    <>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </>
  );
}

Owns the data.

Can change the data.

Stateless Component

function CounterDisplay({ count }) {
  return <h2>{count}</h2>;
}

Receives the data.

Displays the data.

Cannot change it.

Visual Comparison

Stateful

Component
    │
    ▼
Own State
    │
    ▼
Updates State
    │
    ▼
Re-renders

Stateless

Parent
   │
   ▼
Props
   │
   ▼
Child Displays

Can a Stateless Component Re-render?

Yes.

A stateless component can re-render, but not because of its own state.

It re-renders when:

• Its parent re-renders.
• It receives new props.

Example:

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

If the parent changes

<Greeting name="Qayyum" />

to

<Greeting name="Abdul" />

React re-renders Greeting with the new prop.

Modern React Note

In older React terminology:

• Class components were usually called stateful.
• Function components were usually called stateless.

However, since the introduction of Hooks (React 16.8), function components can also use useState, useEffect, and other hooks.

For example:

function Counter() {
  const [count, setCount] = useState(0);
return <h1>{count}</h1>;
}

This is a function component, but it is stateful because it uses state.

So today:

• A function component can be stateful or stateless.
• Being a function component does not automatically mean it is stateless.

Quick Comparison Table

FeatureStateful ComponentStateless ComponentHas state (useState)✅❌Receives props✅✅Can update its own data✅❌Can re-render due to state changes✅❌Can re-render due to new props✅✅Main purposeManage data and behaviorDisplay data

Interview Answer (Short Version)

A stateful component is a component that manages its own state using hooks like useState. It can update its data and re-render itself when the state changes.

A stateless component does not manage its own state. It receives data through props and displays it. It re-renders only when its parent re-renders or when it receives new props.

Simple Rule to Remember:

• Stateful = Owns and updates data.
• Stateless = Receives and displays data.