Difference between functional and class components in React.js

Difference between functional and class-based components in React:

1. Syntax:
   • Functional components are simple JavaScript functions.
   • Class components are created using ES6 classes and extend React.Component.
2. State Handling:
   • Functional components use the useState hook to manage state.
   • Class components use this.state and this.setState.
3. Lifecycle Methods:
   • Functional components use hooks like useEffect for side effects.
   • Class components have lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
4. this Keyword:
   • Functional components do not use this.
   • Class components require this to access props, state, and methods.
5. Code Readability:
   • Functional components are typically shorter and easier to read.
   • Class components are more verbose and complex.
6. Modern Practice:
   • Functional components with hooks are now the recommended and more modern approach in React.
   • Class components are still supported but used less in new codebases.

---

✅ Functional Component (Modern Way)

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

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

  useEffect(() => {
    console.log('Component mounted or updated');
  }, [count]);

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

---

🧱 Class-Based Component (Older Way)

import React, { Component } from 'react';

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

  componentDidUpdate() {
    console.log('Component updated');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

---

Summary:

• Functional components use hooks (useState, useEffect) and are simpler.
• Class components use constructors, lifecycle methods, and this.

In React today, functional components are preferred unless you’re working with legacy code.