React Class Components

React Class Components: Understanding Legacy Classes and Lifecycle Methods

Before React 16.8 introduced Hooks, React class components were the only way to store local state and run lifecycle callbacks. A class component extends React.Component, defines a render() method that returns JSX, and manages state through this.state and this.setState().

Anatomy of a Class Component

While modern React projects use function components, you will still encounter class components in older codebases and in Error Boundaries. Here is how state initialization and updates work inside a class.

import { Component } from 'react';

export class TimerCard extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.timerId = setInterval(() => {
      this.setState((prev) => ({ seconds: prev.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  render() {
    return (
      <section>
        <h2>Elapsed Time: {this.state.seconds}s</h2>
      </section>
    );
  }
}

Lifecycle Methods Mapped to Hooks

Class components expose explicit lifecycle hooks such as componentDidMount for fetching data or starting timers, componentDidUpdate for reacting to prop changes, and componentWillUnmount for cleaning up subscriptions before removal. Understanding this mapping makes migrating older screens to function components straightforward.

Common Class Component Mistakes

• Mutating this.state Directly: Writing this.state.seconds = 5 never triggers a re-render. Always call this.setState(...).
• Forgetting this Binding on Methods: Passing onClick={this.handleClick} on a regular class method loses this context unless you bind it in the constructor or use an arrow class field.
• Using Deprecated Lifecycles: Methods like componentWillMount and componentWillReceiveProps cause race conditions in concurrent rendering and should be replaced.

Frequently Asked Questions

Should I write new features using class components?

No. React recommends function components with Hooks for all new components because hooks avoid this binding bugs and simplify logic reuse.

Are class components completely removed in React 19?

No. Class components still work in React 19, and Error Boundaries (componentDidCatch and getDerivedStateFromError) still require class syntax.

Does this.setState overwrite all state properties?

No. Unlike the useState setter, this.setState performs a shallow merge with existing this.state properties.