In React, a component is a reusable piece of the user interface. Every React application is made up of multiple components working together. React supports two types of components: class components and functional components. Both are used to create UI, but they differ in syntax, features, and modern usage.

Class Components

Class components are JavaScript classes that extend from React.Component. They were the primary way to create components before Hooks were introduced. Class components can hold state and use lifecycle methods to control behavior during different phases of a component’s life, such as mounting, updating, and unmounting.

Example of a class component:

import React from "react";

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Welcome to React"
    };
  }

  render() {
    return <h1>{this.state.message}</h1>;
  }
}

export default Welcome;

In this example, the component uses a constructor to initialize state and a render method to return JSX. The render method is mandatory in class components.

Class components also support lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods are used to perform tasks like API calls, subscriptions, or cleanup.

Example with lifecycle method:

componentDidMount() {
  console.log("Component mounted");
}

While powerful, class components often become complex and harder to maintain as applications grow, especially when handling state and side effects.

Functional Components

Functional components are plain JavaScript functions that return JSX. Initially, they were used only for simple UI, but with the introduction of Hooks, functional components can now manage state, side effects, and more. Today, functional components are the recommended way to build React applications.

Example of a functional component:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

export default Welcome;

Functional components become powerful when Hooks are used.

Example using state with a Hook:

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

This example shows how state can be managed without classes. Hooks make the code simpler, cleaner, and easier to reuse.

Key Differences Between Class and Functional Components

Class components use classes and the this keyword, while functional components use functions and Hooks. Class components rely on lifecycle methods, whereas functional components handle similar behavior using Hooks like useEffect. Functional components generally have less boilerplate code and are easier to read and test.

Real-World Scenario

In a real-world application such as a dashboard or form-based system, functional components are commonly used to handle user input, fetch data, and update the UI dynamically. However, many existing applications still use class components. Understanding both allows developers to maintain older codebases while writing modern React code using functional components.

Important Notes and Best Practices

Modern React development strongly favors functional components with Hooks. Class components are still supported but are considered legacy for new development. Developers should learn class components mainly to understand existing projects, while focusing on functional components for building new applications.

In summary, class and functional components are two ways to build React components. Class components represent the older approach with lifecycle methods, while functional components represent the modern, cleaner, and more flexible way to build React applications using Hooks.