⚔️ Functional vs Class Components in React

React provides two ways to create components: Functional Components and Class Components. Both are used to build user interfaces, but they differ significantly in syntax, state management, lifecycle handling, and modern best practices.

With the introduction of React Hooks, functional components have become the preferred and recommended approach for building React applications today.

🔹 Functional Components

Functional components are plain JavaScript functions that return JSX. Initially, they were used only for UI rendering, but after React 16.8, Hooks enabled them to manage state, side effects, context, and more.

✅ Basic Functional Component Example

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

✅ Functional Component 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)}>Increment</button>
    </>
  );
}

🔑 Key Characteristics

Simple and concise syntax
Uses Hooks (useState, useEffect, etc.)
Easier to read, test, and reuse
Recommended for modern React development

🔸 Class Components

Class components use ES6 class syntax and extend React.Component. They manage state using this.state and lifecycle methods like componentDidMount.

While still supported, they are generally considered legacy for new projects.

🏛️ Basic Class Component Example

import React from "react";

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

🏛️ Class Component with State

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 (
      <>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </>
    );
  }
}

⚠️ Drawbacks

More boilerplate code
Harder to reuse logic
Lifecycle methods are verbose
No Hooks support

📋 Comparison: Functional vs Class Components

Feature	Functional Components	Class Components
Syntax	JavaScript function	ES6 class
State Management	`useState` Hook	`this.state`
Lifecycle Handling	`useEffect` Hook	Lifecycle methods
Code Length	Short & clean	Verbose
Reusability	High (custom hooks)	Limited
Performance	Optimized by React	Slightly heavier
Modern Recommendation	✅ Yes	❌ No (legacy)

🔄 Lifecycle Comparison with Code

Functional (useEffect)

useEffect(() => {
  console.log("Component mounted");

  return () => {
    console.log("Component unmounted");
  };
}, []);

Class Component Lifecycle

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

componentWillUnmount() {
  console.log("Component unmounted");
}

🧠 When Should You Use Each?

✅ Use Functional Components When:

Building new applications
Writing reusable and clean code
Using hooks and modern React features
Optimizing performance and readability

⚠️ Use Class Components When:

Maintaining legacy codebases
Working with older React projects

🔚 Final Thoughts

Functional components are the present and future of React. They are easier to understand, more powerful with hooks, and promote better code organization and reusability.

Class components are still supported, but for new development, always prefer functional components. Mastering them is essential for writing clean, scalable, and modern React applications 🚀

What is the Difference Between Functional and Class Components in React?