React Class Components

• A React class component is a standard JavaScript class that extends React.Component, granting it access to React's internal API.
• Before React 16.8 (the introduction of Hooks), class components were the only way to manage state and utilize lifecycle methods.
• Even in modern development, understanding classes is crucial because thousands of existing enterprise applications still rely on them.

Creating a Simple Class Component

Every class component must include a render() method. This method is responsible for returning the JSX that defines what appears on the user's screen. Unlike functional components, which are essentially just functions, class components require this explicit method to output HTML.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, Coder! Welcome to the team.</h1>;
  }
}

export default Greeting;

State in Class Components

State is an object that holds information about the component that might change over time. In a class component, state is initialized within a constructor. To update the state, you must never modify it directly; instead, you use the this.setState() method, which tells React to re-render the UI with the new data.

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props); // Required to access 'this' and pass props to the parent class
    this.state = {
      count: 0,
      user: 'Guest'
    };
  }

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

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

Lifecycle Methods in Class Components

Lifecycle methods are special functions that run automatically at specific points in a component's "life"—when it is born (mounted), updated, or destroyed (unmounted). This is where you handle things like API calls, setting up subscriptions, or cleaning up timers.

• componentDidMount: Runs once after the component is added to the DOM. Perfect for fetching data from an API.
• componentDidUpdate: Runs whenever the component's props or state change. Use this to respond to data updates.
• componentWillUnmount: Runs right before the component is removed. Use this to cancel network requests or clear intervals to prevent memory leaks.

import React, { Component } from 'react';

class LifecycleDemo extends Component {
  componentDidMount() {
    // Real-world example: Starting a clock or fetching user data
    console.log('Component is now visible on the screen.');
    this.timerID = setInterval(() => console.log('Tick...'), 1000);
  }

  componentWillUnmount() {
    // Real-world example: Cleaning up to prevent memory leaks
    console.log('Component is being removed.');
    clearInterval(this.timerID);
  }

  render() {
    return <p>Check your console to see the lifecycle events in action!</p>;
  }
}

Class Components vs Functional Components

For many years, Class Components were the "heavy lifters" of React. However, with the introduction of Hooks (like useState and useEffect), functional components can now do everything classes can do, but with less code and better readability. Functional components are generally preferred for new projects because they avoid the complexities of the this keyword and offer better performance optimization through closures.

When to Use Class Components

While Functional Components are the modern standard, Class Components remain relevant in a few scenarios:

• Maintaining Legacy Code: You will likely encounter Class Components in existing professional projects or older libraries.
• Error Boundaries: As of the latest React versions, Error Boundaries (which catch JavaScript errors anywhere in their child component tree) must still be written as Class Components.
• Personal Preference/Team Standards: Some teams still prefer the explicit structure of classes for very complex logic.

Summary

Mastering React Class Components is like learning the history of a language. Even if you primarily write modern Functional Components, knowing how classes, state objects, and lifecycle methods work will make you a much more versatile developer. It allows you to debug older codebases, understand how React evolved, and handle edge cases like Error Boundaries with confidence.