Mounting phase in React - Performance & Optimization

Performance: Mounting phase

MEDIUM IMPACT

This affects the initial page load speed and how quickly React components appear on screen.

Rendering a component with heavy synchronous logic during mounting

React

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      const result = heavyComputation();
      setData(result);
    }, 0);
  }, []);

  if (data === null) return <div>Loading...</div>;
  return <div>{data}</div>;
}

function heavyComputation() {
  let sum = 0;
  for (let i = 0; i < 1e7; i++) sum += i;
  return sum;
}

Defers heavy work after initial render, allowing React to paint UI faster.

📈 Performance GainInitial render is non-blocking, reducing LCP by 100+ ms

Rendering a component with heavy synchronous logic during mounting

React

function MyComponent() {
  const data = heavyComputation();
  return <div>{data}</div>;
}

function heavyComputation() {
  let sum = 0;
  for (let i = 0; i < 1e7; i++) sum += i;
  return sum;
}

Heavy synchronous computation blocks React from rendering the component quickly.

📉 Performance CostBlocks rendering for 100+ ms depending on device

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous logic in render	1 (initial mount)	1 (initial layout)	High (delayed paint)	[X] Bad
Deferred heavy logic with useEffect	1 (initial mount)	1 (initial layout)	Low (fast paint)	[OK] Good

Rendering Pipeline

During mounting, React builds the virtual DOM, calculates changes, and updates the real DOM. Heavy synchronous code delays these steps, blocking browser painting.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

→Paint

⚠️ BottleneckJavaScript Execution blocking main thread

Core Web Vital Affected

LCP

This affects the initial page load speed and how quickly React components appear on screen.

Optimization Tips

1Avoid heavy synchronous logic inside React render functions during mounting.

2Use useEffect to defer expensive computations until after initial paint.

3Keep mounting phase fast to improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is the main performance issue with heavy synchronous code inside a React component's render during mounting?

A It increases CSS selector complexity.

B It causes excessive network requests.

C It blocks the main thread delaying the first paint.

D It triggers multiple reflows after mounting.

DevTools: Performance

How to check: Record a performance profile during page load, then look for long tasks blocking main thread during React mounting.

What to look for: Long JavaScript execution bars before first paint indicate blocking in mounting phase.