Functional & Class Components

In React, components are the foundation of every application. They define what the user sees on the screen and how the UI behaves.

There are two main types of components in React:

What Are React Components?

A component in React is a reusable piece of code that returns a part of the user interface (UI).

It can contain HTML, CSS, and JavaScript logic — all bundled together.

For example:

This small block of code is a React component.

function Hello() {
  return <h1>Hello, React!</h1>;
}

Functional Components (Modern React)

Functional Components are the simplest and most widely used type of component in React today.

They are just JavaScript functions that return JSX (HTML-like syntax).

Basic Example:

function Welcome() {
  return <h2>Welcome to React Functional Components!</h2>;
}

Usage:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Key Features of Functional Components

1. Simple and Clean – Easy to read, write, and maintain.
2. Faster Performance – Because they’re plain functions.
3. Use React Hooks – You can use useState, useEffect, and other hooks for state and lifecycle.
4. Reusable and Declarative – Perfect for modular UI design.

Example with Props

You can pass props (data) to functional components just like function arguments.

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

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

Example with State (Using Hooks)

Functional components can manage state using the useState hook.

import React, { useState } from "react";

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

  return (
    <><p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

How it works:

• useState(0) creates a state variable count with an initial value of 0.
• setCount() updates that value.
• React re-renders the component whenever the state changes.

Class Components (Older React)

Before React Hooks (introduced in 2018), developers used Class Components to manage state and lifecycle methods.

They are still valid, but functional components are now preferred for simplicity.

Basic Class Component Example

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h2>Hello from Class Component!</h2>;
  }
}

export default Welcome;

Usage:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Example with Props

In class components, props are accessed using this.props.

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

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

Example with State

In class components, state is declared using a constructor and updated with this.setState().

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

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

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

Functional vs Class Components – Key Differences

Feature	Functional Component	Class Component
Syntax	Simple function	Uses ES6 class syntax
State Handling	useState Hook	this.state & setState()
Lifecycle Methods	useEffect Hook	componentDidMount(), etc.
Performance	Faster & lightweight	Slightly slower
Ease of Use	Easier to read and write	More boilerplate
Recommended in 2025	Yes (modern standard)	Legacy support only

Which One Should You Use?

Use Functional Components for all new React projects.

They are:

• Simpler
• More efficient
• Fully supported by Hooks
• Future-proof and modern

Class Components are mainly found in older codebases or legacy React tutorials.

It’s good to understand them — but not necessary for new projects.

Summary Table

Concept	Functional Component	Class Component
Definition	JavaScript function returning JSX	ES6 class extending React.Component
Hooks Support	Yes	No (uses lifecycle methods)
Example	function Welcome() { return <h1>Hello</h1>; }	class Welcome extends React.Component { render() { return <h1>Hello</h1>; } }