Unmounting phase in React - Performance & Optimization

Performance: Unmounting phase

MEDIUM IMPACT

This affects how quickly the browser can remove components and free up memory, impacting interaction responsiveness and visual stability.

Cleaning up resources when a React component is removed

React

useEffect(() => {
  return () => {
    // lightweight cleanup or defer heavy tasks
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        // perform heavy cleanup asynchronously
      });
    } else {
      // fallback for browsers without requestIdleCallback
      setTimeout(() => {
        // perform heavy cleanup asynchronously
      }, 0);
    }
  };
}, []);

Defers heavy cleanup to idle time, keeping main thread free for user input and smooth UI.

📈 Performance GainReduces blocking time to near 0ms during unmount, improving INP

Cleaning up resources when a React component is removed

React

useEffect(() => {
  return () => {
    // heavy synchronous cleanup like large DOM manipulations or complex calculations
    for (let i = 0; i < 1000000; i++) {
      // simulate heavy cleanup
    }
  };
}, []);

Heavy synchronous cleanup blocks the main thread during unmount, causing input delays and janky UI.

📉 Performance CostBlocks rendering for 50-100ms depending on cleanup complexity, increasing INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous cleanup in unmount	Multiple DOM removals and complex JS	Triggers multiple reflows	High paint cost due to layout thrashing	[X] Bad
Lightweight or deferred cleanup	Minimal DOM changes, async cleanup	Single or no reflow during unmount	Low paint cost, smooth transition	[OK] Good

Rendering Pipeline

During unmounting, React removes components from the virtual DOM and updates the real DOM. Cleanup code runs, which can block the main thread if heavy. This affects the browser's ability to respond to user input quickly.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution during cleanup

Core Web Vital Affected

INP

This affects how quickly the browser can remove components and free up memory, impacting interaction responsiveness and visual stability.

Optimization Tips

1Keep cleanup code in unmount phase lightweight and fast.

2Defer heavy cleanup tasks to idle time or background threads.

3Avoid synchronous DOM manipulations during unmount to prevent input delays.

Performance Quiz - 3 Questions

What is a common performance problem during the React unmounting phase?

A Heavy synchronous cleanup blocking the main thread

B Not using useEffect for cleanup

C Using functional components instead of class components

D Rendering too many components initially

DevTools: Performance

How to check: Record a performance profile while navigating away from a component or closing it. Look for long tasks during the unmount phase.

What to look for: Long blocking JavaScript tasks during unmount indicate heavy cleanup causing input delays.