What are the differences between functional and class components?

React offers two component types: class components and functional components.

🧠 Functional Components

• Simple JavaScript functions.
• Use hooks like useState, useEffect for state and side effects.
• Easier to read, test, and optimize.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count}</button>;
}

🧩 Class Components

• Use ES6 classes with render() methods.
• Lifecycle handled with methods like componentDidMount.

class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Clicked {this.state.count}
      </button>
    );
  }
}

✅ Key Differences