Functional vs Class Components

import React, { useState } from 'react';

// --- MODERN FUNCTIONAL COMPONENT ---
// Simple, readable, no 'this' keyword.
export default function ModernCounter() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 border rounded mb-4">
      <h2>Functional Component</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

// --- LEGACY CLASS COMPONENT ---
// Verbose, requires constructor, 'this', and manual binding (if not using arrow functions)
export class LegacyCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // We used to have to do this: this.handleClick = this.handleClick.bind(this);
  }

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

  render() {
    return (
      <div className="p-4 border rounded">
        <h2>Class Component</h2>
        {/* Notice how we have to use 'this' everywhere */}
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}