Understanding the React Component Lifecycle: Class Components vs Function Components

When you build applications in React, your components don’t just magically appear and stay static — they live and die in a predictable order of events. This process is called the component lifecycle.

In simple terms, a component goes through three main stages:

Mounting – when it’s created and inserted into the DOM.

Updating – when it changes in response to new data or props.

Unmounting – when it’s removed from the DOM.

Knowing this sequence is key to writing components that handle setup, updates, and cleanup without bugs.

One. The Lifecycle in Class Components
Class components have distinct methods for each phase. Think of it like a play script: each method is called at the right time in the performance.

A. Mounting – First appearance on the screen
constructor() – Set up initial state and bind methods.

static getDerivedStateFromProps() – Sync state from incoming props (rarely used in modern React).

render() – Return the JSX that describes the UI.

componentDidMount() – Runs after the component is added to the DOM.
Common uses: Fetching data, starting timers, adding event listeners.

B. Updating – Re-render due to state/prop changes
static getDerivedStateFromProps() – Again, if syncing state from props is necessary.

shouldComponentUpdate() – Decide whether to re-render (performance optimization).

render() – Output updated UI.

getSnapshotBeforeUpdate() – Capture DOM values before updates.

componentDidUpdate() – Runs after DOM updates.
Common uses: Making API calls after state changes, interacting with updated DOM nodes.

C. Unmounting – Component removal
componentWillUnmount() – Cleanup before removal.
Common uses: Clearing timers, removing event listeners, canceling network requests.

Two. The Lifecycle in Function Components
Function components don’t have individual lifecycle methods — they use hooks, especially useEffect(), to manage side effects.

The lifecycle phases still exist, but they’re controlled differently.

Mount – Code inside useEffect(() => { ... }, []) runs once after the first render.

Update – Code inside useEffect(() => { ... }, [dependency]) runs whenever dependencies change.

Unmount – The cleanup function returned from useEffect runs when the component is removed.

Example:

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("Mounted");

    return () => {
      console.log("Unmounted");
    };
  }, []);

  return <div>Hello, world!</div>;
}

Three. Visualizing the Lifecycle
Here’s the class component lifecycle in a nutshell:

MOUNTING:
constructor → render → componentDidMount

UPDATING:
render → componentDidUpdate

UNMOUNTING:
componentWillUnmount

For function components:

render → useEffect(() => { ... }, []) → cleanup on unmount

Four. Why It Matters
Understanding the lifecycle helps you:

Avoid memory leaks by cleaning up properly.

Fetch data at the right time.

Optimize performance by skipping unnecessary updates.

Debug tricky component behavior.

React’s lifecycle isn’t just theory — it’s a practical guide for when and where to put your code so it runs exactly when you need it to.