React Components Explained: Functional vs Class Components

In React, everything is a component. A component is a small, reusable piece of UI — like a button, header, form, or even an entire page.

Think of components like LEGO blocks: each block is independent, but when you combine them, you can build powerful applications.

There are two main types of components in React:

Functional Components (modern, simple, widely used today)
Class Components (older, powerful, but less common after Hooks)

Let’s learn both step by step.

What is a React Component?

A React component is basically:

A JavaScript function or class that returns JSX (UI description).
Components can accept props (inputs) and manage state (data).
They are reusable and make code easier to manage.

Functional Components

Functional components are just JavaScript functions that return JSX.

Example: Functional Component

props are inputs passed to the component (like function arguments).
This component displays a greeting with the name passed to it.

Usage:

Output:

Functional Components with Hooks

Earlier, functional components could not manage state or lifecycle methods. But with React Hooks (introduced in React 16.8), they became powerful.

Example with useState Hook:

import { useState } from "react";

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

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

useState creates a state variable (count) and a setter (setCount).
Clicking the button updates state, triggering re-render.

Class Components

Class components are built using ES6 classes and extend from React.Component.

Example: Class Component

import React, { Component } from "react";

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

Usage:

Class Component with State

Unlike functional components (before Hooks), class components could manage state and use lifecycle methods.

Example:

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

Functional vs Class Components (Comparison Table)

Feature	Functional Components	Class Components
Definition	JavaScript function returning JSX	ES6 class extending `React.Component`
State Management	Using Hooks (`useState`, `useReducer`)	Using `this.state` and `setState()`
Lifecycle Methods	Using Hooks (`useEffect`, `useLayoutEffect`)	Using methods like `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`
Syntax	Simple and concise	Verbose
Performance	Slightly faster (less boilerplate)	Heavier
Popularity Today	Widely used (modern React standard)	Older style, less common after Hooks

Which Should You Use?

Use Functional Components for most cases — they are modern, easier to read, and fully supported with Hooks.
Use Class Components only if you are working with legacy code or maintaining older React apps.

FAQ

Q1: Can I mix functional and class components in one app?
Yes, React supports both. Many older apps mix them.

Q2: Are class components going away?
No, but they are no longer the recommended way. React team encourages functional components with Hooks.

Q3: Do functional components always need Hooks?
No. Hooks are only needed when you use state or lifecycle effects.