Lifecycle mapping with hooks in React - Step-by-Step Execution

Concept Flow - Lifecycle mapping with hooks

Component Mounts

↓

Initial Render Complete

↓

useEffect(() => { ... }, [

↓

State or Props Change

↓

Component Re-renders

↓

useEffect(() => { ... }, [deps

↓

Component Unmounts

↓

Cleanup Runs

This flow shows how React functional components use hooks to run code when mounting, updating, and unmounting.

Execution Sample

React

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

function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <div>{count}</div>;
}

This Timer component increases count every second using useEffect to set up and clean up the interval.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Component mounts	count: undefined	Initialize count=0	count: 0	Timer component	Render <div>0</div>
2	useEffect runs after mount	count: 0	Set interval to increment count every 1s	count: 0	No immediate re-render	No DOM change
3	1 second passes	count: 0	setCount increments count to 1	count: 1	Timer component	Update <div>1</div>
4	1 second passes	count: 1	setCount increments count to 2	count: 2	Timer component	Update <div>2</div>
5	Component unmounts	count: 2	Cleanup: clearInterval called	count: 2	No re-render	Interval stops, DOM remains <div>2</div>

💡 Component unmounts, cleanup runs, interval stops, no further updates.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	undefined	0	1	2	2
intervalId	undefined	id set	id set	id set	cleared

Key Moments - 3 Insights

Why does useEffect run after the first render and not during it?

useEffect runs after the render to avoid blocking UI updates. See execution_table step 2 where effect sets interval only after initial render.

What happens if we forget to return a cleanup function in useEffect?

The interval would keep running even after unmount, causing memory leaks. Step 5 shows cleanup stopping the interval.

Why does the component re-render when count changes?

Calling setCount updates state, triggering React to re-render the component with new count. See steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count at Step 3?

A 1

B 2

C 0

D undefined

💡 Hint

Check the 'State After' column at Step 3 in execution_table.

At which step does the cleanup function run?

A Step 3

B Step 5

C Step 2

D Step 1

💡 Hint

Look for 'Component unmounts' and 'Cleanup' in execution_table.

If we remove the empty dependency array in useEffect, what changes in the execution?

A Effect runs only once after mount

B Cleanup never runs

C Effect runs after every render causing multiple intervals

D State never updates

💡 Hint

Dependency array controls when useEffect runs; see step 2 explanation.

Concept Snapshot

React functional components use useEffect hook to run code at key lifecycle points.
- useEffect with [] runs once after mount.
- Returning a function cleans up on unmount.
- State changes trigger re-renders.
- Effects run after render to keep UI responsive.

Full Transcript

This visual execution shows how React functional components use hooks to manage lifecycle events. When the component mounts, useState initializes state. Then useEffect runs after the first render to set up side effects like intervals. Each state update triggers a re-render, updating the DOM. When the component unmounts, the cleanup function runs to clear intervals and prevent leaks. This flow helps beginners see how hooks replace class lifecycle methods with simple, clear steps.