Functional vs. Class Components

When you begin your journey with React, you'll immediately encounter two ways to create components: **Functional Components** and **Class Components**. While both can achieve the same results, the React ecosystem has undergone a significant paradigm shift. Understanding the "why" behind this shift is crucial to becoming a proficient React developer.

Historically, Class Components were the only way to manage state and access lifecycle methods. Functional components were just "dumb" presentational components. This all changed in 2018 with the introduction of **Hooks**, which allowed functional components to do everything classes could, and more, but with a simpler and more powerful API.

1. Syntax: Verbose vs. Concise

The most obvious difference is the syntax. Class components are ES6 classes, requiring more boilerplate, while functional components are plain JavaScript functions.

import React, { Component } from 'react';

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

import React from 'react';

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

2. State Management: `this.setState` vs. `useState`

This is the most significant functional difference. Class state is a single, monolithic object. Functional state is managed with the `useState` Hook, which lets you create multiple, independent state variables.

• Class State: Initialized in the `constructor`. Updated with `this.setState()`. When you call `this.setState()`, React **merges** your update with the existing state object.
• Functional State (`useState`): Returns a pair: the current value and a function to update it. The update function **replaces** the old value. You must manage objects manually if that's what you store.

// CLASS
constructor(props) {
  super(props);
  this.state = { count: 0, name: 'User' };
}
//...
this.setState({ count: 1 }); // Merges state: { count: 1, name: 'User' }

// FUNCTIONAL
const [count, setCount] = useState(0);
const [name, setName] = useState('User');
//...
setCount(1); // Replaces state. State is managed separately.

3. Lifecycle Methods vs. The `useEffect` Hook

Classes have a complex set of lifecycle methods to run code at different times (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`). Functional components unify all of these into a single API: the `useEffect` Hook.

4. The `this` Keyword: The Elephant in the Room

In class components, you must constantly manage the `this` keyword. JavaScript's `this` is dynamic, so event handlers in classes (like `onClick={this.handleClick}`) will lose their context unless you explicitly `.bind(this)` in the constructor or use arrow functions. This is a common source of bugs.

**Functional components have no `this` keyword.** You just define functions and variables in the component's scope. This closure-based approach is far more intuitive and less error-prone.

5. Code Reusability: HOCs vs. Custom Hooks

This is the knockout blow. In the past, to share stateful logic between class components, you had to use complex patterns like Higher-Order Components (HOCs) or Render Props. These patterns led to "wrapper hell" and made code hard to follow.

Functional components introduced **Custom Hooks**. A custom hook is just a JavaScript function whose name starts with "use" that can call other Hooks. It's a simple, elegant way to extract and reuse stateful logic without adding extra components to the tree.

// CUSTOM HOOK
function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

//... In your component
useDocumentTitle('My Page Title'); // Simple, reusable, and clean.

Key Takeaway: Always use **Functional Components with Hooks** for any new React code. They are more concise, easier to read, and offer a superior way to manage state, side effects, and reusable logic (Custom Hooks). You only need to learn Class Components to maintain older codebases.