Functional and Class based component difference

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable components to structure applications efficiently. Two types of components are widely used: functional components and class-based (non-functional) components.

Let’s dive into the differences and also explore how lifecycle events work.

---

🔹 Functional Components

Functional components are simple JavaScript functions that return JSX (UI representation).

• Definition: Written as functions (either ES6 arrow functions or normal functions).
• Stateless (before Hooks): Initially, they could not hold state or use lifecycle methods.
• With Hooks: After React 16.8, functional components can manage state and side effects using Hooks like useState, useEffect, etc.
• Syntax Example:

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

Or using arrow function:

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

✅ Advantages:

• Easy to write and read.
• Performance-friendly (no heavy React internals).
• Best suited for presentational/UI logic.

---

🔹 Class-Based (Non-Functional) Components

Class components are ES6 classes that extend React.Component. They come with built-in support for state and lifecycle methods.

• Definition: Defined using JavaScript classes.
• Stateful: Can store and update local state.
• Lifecycle Methods: Have predefined methods like componentDidMount(), componentDidUpdate(), etc.
• Syntax Example:

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

  render() {
    return <h1>{this.state.message}, {this.props.name}!</h1>;
  }
}

✅ Advantages:

• Clear lifecycle management.
• Good for complex logic (before Hooks existed).

⚠️ Note: Since Hooks were introduced, most modern React apps prefer functional components. Class components are rarely used now but still important to understand.

---

🔹 Key Differences Between Functional & Class Components

Feature	Functional Component	Class Component (Non-Functional)
Definition	Simple JavaScript function	ES6 class extending React.Component
State Handling	Using useState, useReducer (Hooks)	this.state & this.setState
Lifecycle Events	Using useEffect Hook	Predefined lifecycle methods
Code Complexity	Simple and concise	More verbose
Performance	Faster, lightweight	Slightly heavier
Preferred Today?	✅ Yes	❌ Mostly legacy

---

🔹 React Lifecycle Events

Lifecycle events describe how a component behaves from creation to destruction. They are mainly applicable to class components, but Hooks (useEffect, useLayoutEffect) allow lifecycle-like behavior in functional components.

Class Component Lifecycle

1. Mounting (When component is created & inserted into DOM)

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

1. Updating (When props or state change)

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

1. Unmounting (When component is removed from DOM)

• componentWillUnmount()

---

Functional Component Lifecycle with Hooks

Functional components don’t have lifecycle methods, but Hooks replicate them:

• useEffect(() => { ... }, []) → Acts like componentDidMount()
• useEffect(() => { ... }, [dependency]) → Acts like componentDidUpdate()
• useEffect(() => { return () => {...}}, []) → Acts like componentWillUnmount()

Example with Hooks:

import React, { useState, useEffect } from "react";

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

  // Runs when component mounts and whenever 'count' changes
  useEffect(() => {
    console.log("Component Mounted or Updated");

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

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