React Class Components

React Class Components: Legacy State & Lifecycle Methods

Prior to the introduction of React Hooks in version 16.8, Class Components were the only way to manage component state and handle side-effects via lifecycle methods in React.

While functional components with hooks are now the modern standard, understanding class components remains important for maintaining legacy codebases.

Component Lifecycle Stages

flowchart LR
    Mount["Mounting (componentDidMount)"] --> Update["Updating (componentDidUpdate)"]
    Update --> Unmount["Unmounting (componentWillUnmount)"]

Class Component Example

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props) {
    super(props);
    // Initialize component state
    this.state = {
      time: new Date().toLocaleTimeString(),
    };
  }

  // Lifecycle Method: Runs after component mounts to DOM
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState({ time: new Date().toLocaleTimeString() });
    }, 1000);
  }

  // Lifecycle Method: Runs before component unmounts from DOM
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div className="clock-widget">
        <h2>{this.props.label}</h2>
        <p>Current Time: {this.state.time}</p>
      </div>
    );
  }
}

export default Clock;

Modern Equivalent vs Legacy Comparison

Best Practices & Gotchas

• Always Call super(props): In ES6 class constructors, super(props) must be called before accessing this.props.
• Do Not Mutate State Directly: Writing this.state.count = 5 will not trigger a re-render. Always use this.setState().

Self-Check Challenge

Convert the Clock class component above into a functional component using useState and useEffect.