React Lifecycle Methods Explained: Class vs Functional Components

I think about React components like little spaceships, each on its journey through the galaxy of an app. Class components and functional components are like two different types of ships, each with its own way of handling missions.

Class components remind me of the old-school, crewed spaceships. They’ve got a captain — the constructor method — that sets up the ship before launch. The captain delegates tasks to lifecycle crew members: componentDidMount, who preps the ship after liftoff; componentDidUpdate, who handles course corrections during the voyage; and componentWillUnmount, who makes sure the ship is decommissioned properly at the end. It’s a lot of structure — crew members are dedicated to specific jobs, and everything runs smoothly, but it can feel a bit rigid.

Functional components, on the other hand, are like sleek, modern drones. No crew on board! Instead, they have a powerful AI called React Hooks that dynamically handles the journey. useEffect is like a Swiss Army knife — it can handle what the captain, crew, and decommissioning team did in the old ships. Depending on how I program it, I can tell useEffect to prepare for launch (like a class component’s componentDidMount), adjust the course mid-flight (componentDidUpdate), or clean up after a mission (componentWillUnmount). It’s incredibly flexible and efficient, though it does require clear instructions to avoid chaos.

I see the difference this way: class components feel like spaceships from the Apollo era — structured, predictable, but requiring more manual setup. Functional components are like cutting-edge drones — automated, streamlined, and modular. Both can explore the galaxy, but the drones make me feel more like a tech-savvy commander, wielding advanced tools for precise control.

Get myHotTake’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In the class component “spaceship,” lifecycle methods are like crew members with specific roles. Here’s what the spaceship code might look like:

Class Component Example

import React, { Component } from "react";

class Spaceship extends Component {
  // Captain (Constructor): Sets up the spaceship before launch
  constructor(props) {
    super(props);
    this.state = { fuelLevel: 100 };
    console.log("Spaceship constructed!");
  }
  // Lifecycle crew: Runs after launch (initial rendering)
  componentDidMount() {
    console.log("Spaceship launched into space!");
    // Simulating monitoring systems
    this.monitor = setInterval(() => {
      this.setState((prevState) => ({ fuelLevel: prevState.fuelLevel - 1 }));
    }, 1000);
  }
  // Lifecycle crew: Adjust course during flight (after updates)
  componentDidUpdate(prevProps, prevState) {
    if (prevState.fuelLevel !== this.state.fuelLevel) {
      console.log(`Fuel level adjusted: ${this.state.fuelLevel}`);
    }
  }
  // Lifecycle crew: Decommission the spaceship
  componentWillUnmount() {
    console.log("Spaceship decommissioned.");
    clearInterval(this.monitor);
  }
  render() {
    return <div>Fuel Level: {this.state.fuelLevel}</div>;
  }
}
export default Spaceship;

Now let’s switch to the functional component “drone.” Instead of individual lifecycle methods, it uses React Hooks like useEffect to dynamically manage different phases of the mission:

Functional Component Example

import React, { useState, useEffect } from "react";

const SpaceshipDrone = () => {
  const [fuelLevel, setFuelLevel] = useState(100);
  // AI (useEffect) managing all phases
  useEffect(() => {
    console.log("Spaceship Drone launched into space!");
    // Simulating monitoring systems
    const monitor = setInterval(() => {
      setFuelLevel((prevFuel) => prevFuel - 1);
    }, 1000);
    // Cleanup: Decommissioning the spaceship
    return () => {
      console.log("Spaceship Drone decommissioned.");
      clearInterval(monitor);
    };
  }, []); // Empty array means this only runs once like componentDidMount
  // Adjust course during flight
  useEffect(() => {
    console.log(`Fuel level adjusted: ${fuelLevel}`);
  }, [fuelLevel]); // Runs whenever fuelLevel changes
  return <div>Fuel Level: {fuelLevel}</div>;
};
export default SpaceshipDrone;

Key Differences

1. Initialization:

• Class Component: Uses the constructor to set up the state.
• Functional Component: Uses useState.

2. Lifecycle Management:

• Class Component: Separate methods (componentDidMount, componentDidUpdate, componentWillUnmount).
• Functional Component: A single useEffect with cleanup capabilities.

3. Flexibility:

• Functional components with hooks are more concise and modular. With useEffect, I can manage multiple concerns in one place.

So in JavaScript, functional components are like those modern drones — they consolidate tasks (like lifecycle methods) into a single flexible tool (useEffect), making them a joy to work with once I learn their quirks.