Unmounting phase in React - Step-by-Step Execution

Concept Flow - Unmounting phase

Component Mounted

↓

User triggers unmount

↓

React calls cleanup functions

↓

Component DOM removed

↓

Component fully unmounted

This flow shows how React removes a component: it first calls cleanup code, then removes the component from the page.

Execution Sample

React

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => clearInterval(id);
  }, []);
  return <div>Timer running</div>;
}

This component logs 'tick' every second and cleans up the timer when it unmounts.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Component mounts	No timer running	Set interval timer	Timer running	Timer component	Timer div added
2	Interval fires	Timer running	Console logs 'tick'	Timer running	No re-render	No DOM change
3	User triggers unmount	Timer running	Call cleanup: clearInterval	Timer stopped	No re-render	Timer div removed
4	After unmount	Timer stopped	No action	No component	No re-render	No DOM element

💡 Component unmounted, cleanup done, no more timer or DOM element

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
id (timer ID)	undefined	setInterval ID	setInterval ID	cleared	cleared
Component mounted	false	true	true	false	false

Key Moments - 2 Insights

Why do we return a function inside useEffect?

The returned function is React's way to run cleanup before unmounting, as shown in step 3 of the execution_table where clearInterval is called.

Does the component re-render when it unmounts?

No, unmounting removes the component from the DOM without re-rendering, as seen in step 3 and 4 where no re-render happens.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A The interval timer is set

B The component re-renders

C The cleanup function clears the interval and component unmounts

D Nothing happens

💡 Hint

Check the 'Action' and 'DOM Change' columns at step 3 in execution_table

According to variable_tracker, what is the state of 'id' after step 3?

A cleared (timer stopped)

B setInterval ID active

C undefined

D null

💡 Hint

Look at the 'id (timer ID)' row after 'After 3' column in variable_tracker

If the cleanup function was missing, what would happen when the component unmounts?

A React would automatically clear the timer

B The timer would keep running causing potential bugs

C The component would not unmount

D Nothing changes

💡 Hint

Think about the purpose of the cleanup function shown in step 3 of execution_table

Concept Snapshot

Unmounting phase in React:
- Happens when component is removed from UI
- useEffect cleanup function runs here
- Cleanup stops timers, subscriptions, etc.
- No re-render during unmount
- Prevents memory leaks and bugs

Full Transcript

In React, the unmounting phase occurs when a component is removed from the screen. React first runs any cleanup functions returned by useEffect hooks. For example, if a timer was set, the cleanup function clears it. Then React removes the component's DOM elements. This prevents leftover processes and memory leaks. The component does not re-render during unmounting. This flow ensures clean removal of components and their side effects.