What are Class Components in React?

This article provides a comprehensive overview of class components in React, explaining their syntax, key features, and how they manage state and lifecycle events. You will also learn how they compare to modern functional components, helping you navigate older codebases and understand the evolution of React development.

Understanding React Class Components

Before the introduction of React Hooks in version 16.8, class components were the primary way to create dynamic, stateful components in React. A class component is an ES6 class that extends the base React.Component class.

To create a class component, you must define a class that inherits from React.Component and include a render() method. The render() method is required because it returns the JSX that defines the component’s UI.

Here is a basic example of a class component:

import React, { Component } from 'react';

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

export default Welcome;

State Management in Class Components

Unlike basic functional components of the past, class components can hold and manage their own local state. The state is initialized inside the class constructor using this.state.

To update the state, you must use the this.setState() method instead of modifying this.state directly. This ensures that React is notified of the state change and re-renders the component.

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

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

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

Lifecycle Methods

One of the main reasons developers used class components was to access lifecycle methods. These methods allow you to run code at specific points in a component’s life, such as when it mounts, updates, or unmounts.

Some of the most commonly used lifecycle methods include:

• componentDidMount(): Runs immediately after a component is inserted into the DOM. This is ideal for fetching data from an API or setting up subscriptions.
• componentDidUpdate(prevProps, prevState): Runs immediately after an update occurs. It is useful for performing DOM operations or fetching new data based on prop changes.
• componentWillUnmount(): Runs immediately before a component is destroyed and removed from the DOM. This is used to clean up timers, cancel network requests, or remove event listeners.

Class Components vs. Functional Components

Today, functional components with React Hooks (such as useState and useEffect) are the industry standard for React development. Functional components are generally easier to read, test, and maintain because they require less boilerplate code.

However, understanding class components remains important. Many existing legacy projects still rely heavily on class components, and React continues to support them for backward compatibility. While you should write new components as functional components, knowing how class components operate is essential for maintaining older codebases.