Why React is used - Performance Evidence

Performance: Why React is used

MEDIUM IMPACT

React affects page load speed and interaction responsiveness by managing UI updates efficiently.

Updating UI efficiently when data changes

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(c => c + 1);

  return <button onClick={increment}>Count: {count}</button>;
}

React batches state updates and updates only changed parts of the DOM efficiently.

📈 Performance GainSingle reflow and repaint per batch of updates, improving interaction responsiveness.

Updating UI efficiently when data changes

React

const updateUI = () => {
  const element = document.getElementById('count');
  element.innerText = newCount;
};

// Called multiple times rapidly
updateUI();
updateUI();
updateUI();

Direct DOM manipulation triggers multiple reflows and repaints, slowing interaction.

📉 Performance CostTriggers multiple reflows and repaints per update, blocking rendering for tens of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation on every change	Many direct node updates	Multiple reflows per update	High paint cost due to frequent changes	[X] Bad
React state updates with virtual DOM	Minimal DOM updates after diffing	Single reflow per batch	Lower paint cost due to optimized updates	[OK] Good

Rendering Pipeline

React uses a virtual DOM to calculate changes before updating the real DOM, reducing costly layout and paint operations.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages caused by direct DOM updates

Core Web Vital Affected

INP

React affects page load speed and interaction responsiveness by managing UI updates efficiently.

Optimization Tips

1Use React to batch UI updates and reduce direct DOM changes.

2Avoid frequent direct DOM manipulation to prevent multiple reflows.

3React's virtual DOM diffing minimizes layout and paint costs.

Performance Quiz - 3 Questions

Why does React improve UI update performance compared to direct DOM manipulation?

A It reloads the entire page after each change.

B It uses more CSS animations to hide updates.

C It batches updates and uses a virtual DOM to minimize real DOM changes.

D It disables browser rendering during updates.

DevTools: Performance

How to check: Record a performance profile while interacting with the UI. Look for long scripting tasks and multiple layout/repaint events.

What to look for: Fewer layout and paint events indicate efficient updates; many indicate costly direct DOM manipulation.