Lifecycle Equivalents: Mount, Update, and Unmount0%
Controlled vs Uncontrolled Components with useRef

Lifecycle Equivalents: Mount, Update, and Unmount

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Lifecycle Equivalents: Mount, Update, and Unmount

1. The Paradigm Shift: From Class Lifecycles to Synchronization

In legacy React class components, developers organized code around explicit lifecycle methods:

  • componentDidMount(): Executed once after the component mounted to the real DOM.
  • componentDidUpdate(prevProps, prevState): Executed after every re-render caused by props or state changes.
  • componentWillUnmount(): Executed immediately before the component was destroyed from the DOM.

While intuitive at first, class lifecycles forced unrelated logic to be scattered across multiple methods. For example, setting up a timer in componentDidMount and tearing it down in componentWillUnmount forced related code into separate places.

In modern functional React, Hooks think in terms of synchronization, not lifecycles. However, understanding how useEffect maps to these classic milestones is crucial for mastering React architecture.

Output
Class Component Lifecycles:
[componentDidMount] ──> [componentDidUpdate] ──> [componentWillUnmount]
(Scattered across three separate methods)
 
Functional Component with useEffect:
useEffect(() => {
// 1. Mount & Update Logic
return () => {
// 2. Cleanup & Unmount Logic
};
}, [dependencies]);
(All related setup and teardown encapsulated together!)

2. Mapping Lifecycles to useEffect

1. Equivalent to componentDidMount: Empty Dependency Array []

JSX
useEffect(() => {
console.log('Mounted: Component is now visible on screen');
fetchInitialCatalog();
}, []); // Empty array guarantees execution only on initial mount

2. Equivalent to componentDidUpdate: Specific Dependencies [prop, state]

JSX
useEffect(() => {
console.log(`Updated: activeTrack changed to ${activeTrack}`);
fetchTrackModules(activeTrack);
}, [activeTrack]); // Runs on mount AND whenever activeTrack changes

3. Equivalent to componentWillUnmount: The Return Cleanup Function

JSX
useEffect(() => {
return () => {
console.log('Unmounted: Component is being removed from the DOM');
};
}, []); // Cleanup function with empty deps runs strictly on unmount

3. Simulating "DidUpdate Only" (Skipping Initial Mount)

In class components, componentDidUpdate did not run on initial mount. In contrast, useEffect always runs on initial mount.

If you specifically require an effect to execute only on subsequent updates (skipping the first render), you can use a useRef flag to track whether the component has mounted:

JSX
import React, { useState, useEffect, useRef } from 'react';
 
export default function UpdateOnlyLogger({ data }) {
const isFirstRender = useRef(true);
 
useEffect(() => {
// 1. Check if this is the initial mount
if (isFirstRender.current) {
isFirstRender.current = false;
return; // Skip execution on initial mount!
}
 
// 2. This code runs strictly on updates!
console.log('Data updated to:', data);
}, [data]);
 
return <div>Data display: {data}</div>;
}

4. Lifecycle Comparison Matrix

MilestoneClass Component MethodFunctional Component Equivalent
Initial MountcomponentDidMount()useEffect(fn, [])
Every RendercomponentDidUpdate()useEffect(fn) (no deps array)
Specific ChangecomponentDidUpdate(prevProps) + ifuseEffect(fn, [value])
Teardown / UnmountcomponentWillUnmount()useEffect(() => () => cleanup(), [])
Interactive Quiz

Practice Quiz

Question 1
What hook configuration in functional React serves as the direct equivalent of componentDidMount()?
Question 2
In legacy class components, why was splitting logic across componentDidMount and componentWillUnmount problematic?
Question 3
How can you create an effect that runs strictly on subsequent updates, skipping the initial mount?
Question 4
When does the cleanup function of an effect with dependency array [id] execute?
Question 5
Does useEffect(fn) (without any dependency array) run on the initial mount?
Next Lesson

Controlled vs Uncontrolled Components with useRef

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Removing Unnecessary useEffect HooksControlled vs Uncontrolled Components with useRef

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext