React vs traditional JavaScript - Performance Comparison

Performance: React vs traditional JavaScript

MEDIUM IMPACT

This affects how fast the page loads and updates when users interact, impacting rendering speed and responsiveness.

Updating UI elements on user interaction

React

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);
  return (
    <>
      <button onClick={() => setItems([...items, 'New item'])}>Add Item</button>
      <ul>
        {items.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </>
  );
}

export default ItemList;

React batches state updates and updates the virtual DOM first, minimizing real DOM changes and reflows.

📈 Performance GainSingle reflow per batch update, improving interaction to next paint (INP) and reducing main thread blocking.

Updating UI elements on user interaction

React

const button = document.getElementById('btn');
button.addEventListener('click', () => {
  const list = document.getElementById('list');
  const newItem = document.createElement('li');
  newItem.textContent = 'New item';
  list.appendChild(newItem);
});

Direct DOM manipulation causes multiple reflows and repaints for each update, slowing down responsiveness.

📉 Performance CostTriggers 1 reflow and repaint per item added, blocking main thread briefly on each update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Traditional JavaScript direct DOM manipulation	Multiple direct node insertions	1 reflow per insertion	High paint cost per update	[X] Bad
React with virtual DOM and state updates	Batched DOM updates via virtual DOM	Single reflow per batch	Lower paint cost due to minimal changes	[OK] Good

Rendering Pipeline

React updates start with a virtual DOM diff, then only the changed parts are updated in the real DOM, reducing layout recalculations and paints.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages due to direct DOM changes in traditional JavaScript

Core Web Vital Affected

INP

This affects how fast the page loads and updates when users interact, impacting rendering speed and responsiveness.

Optimization Tips

1Avoid direct DOM manipulation for frequent UI updates to reduce reflows.

2Use React's state and virtual DOM to batch and minimize DOM changes.

3Measure layout recalculations in DevTools to find performance bottlenecks.

Performance Quiz - 3 Questions

Why does React generally provide better interaction performance than direct DOM manipulation?

A Because React batches updates and minimizes direct DOM changes

B Because React uses more DOM nodes

C Because React blocks rendering longer

D Because React disables browser optimizations

DevTools: Performance

How to check: Record a performance profile while interacting with the UI. Look for long tasks and frequent layout recalculations.

What to look for: High number of layout events and long main thread tasks indicate poor performance; fewer layout recalculations and shorter tasks indicate better React batching.