Class Components in React

Analogy categoryAnalogies

Introduction

Class components are ES6 classes that extend React.Component and implement a render() method returning JSX. Before Hooks were introduced in React 16.8, class components were the only way to add state and lifecycle behavior to a component. They remain fully supported by React today, and understanding them is important for maintaining legacy codebases, even though functional components with Hooks are now the recommended approach for new code.

🏏

Cricket analogy: Before Twenty20 was introduced, batsmen honed their game entirely in Test cricket's grinding format; that method still works and older stars like Rahul Dravid built careers on it, even though T20 techniques are now favored for new recruits.

Syntax

jsx

import React from "react";

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

Explanation

Class components access props via this.props and manage local state via this.state, initialized in the constructor and updated with this.setState(). They expose lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount that let you run code at specific points in a component's existence — for example, fetching data after the component mounts, or cleaning up subscriptions before it unmounts. Event handlers defined as class methods often need to be explicitly bound to 'this' (commonly using arrow function class properties) to avoid losing context.

🏏

Cricket analogy: A captain (this) must explicitly assign fielding positions each innings just as class methods must be bound to 'this', while lifecycle hooks like componentDidMount mirror a player warming up before the match and cooling down after it ends.

Example

jsx

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

  increment = () => {
    this.setState((prev) => ({ count: prev.count + 1 }));
  };

  componentDidMount() {
    console.log("Counter mounted");
  }

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

Output

When mounted, the component logs 'Counter mounted' to the console via componentDidMount, then renders the current count and a button. Clicking the button calls this.setState, which merges the update into the component's state and triggers a re-render with the incremented count.

🏏

Cricket analogy: Like a scoreboard operator announcing 'Play begins' the moment the umpire calls play (componentDidMount), then updating the run total by one each time a batsman completes a single (setState triggering re-render).

Forgetting to bind event handler methods (or using arrow function class properties as shown above) is a common source of bugs in class components, where 'this' becomes undefined inside the handler when it is called.

Key Takeaways

Class components extend React.Component and must implement a render() method returning JSX.
State lives in this.state and is updated only through this.setState(), never by direct mutation.
Lifecycle methods like componentDidMount and componentWillUnmount let you run code at specific points in a component's life.
Event handlers often require explicit binding to 'this', commonly solved using arrow function class properties.
Class components are legacy but fully supported; functional components with Hooks are now recommended for new code.