Rendering elements in React - Performance & Optimization

Performance: Rendering elements

MEDIUM IMPACT

This affects how fast the page shows content and how smoothly it updates when users interact.

Rendering a list of items in React

React

function List({ items }) {
  return items.map(item => <div key={item.id}>{item.name}</div>);
}

Using stable keys lets React update only changed elements, reducing DOM operations.

📈 Performance GainReduces re-renders and repaints, improving interaction speed and LCP.

Rendering a list of items in React

React

function List({ items }) {
  return items.map(item => <div>{item.name}</div>);
}

No unique keys on elements cause React to re-render all items on any change.

📉 Performance CostTriggers full list re-render and multiple DOM updates, increasing paint time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Rendering list without keys	Many nodes updated	Multiple reflows	High paint cost	[X] Bad
Rendering list with keys	Minimal nodes updated	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

React creates virtual elements, compares them to previous ones, then updates the real DOM only where needed.

→Virtual DOM diffing

→DOM Updates

→Paint

→Composite

⚠️ BottleneckDOM Updates stage is most expensive due to layout recalculations and painting.

Core Web Vital Affected

LCP, INP

This affects how fast the page shows content and how smoothly it updates when users interact.

Optimization Tips

1Always use unique keys when rendering lists to help React optimize updates.

2Avoid rendering elements that are not visible or needed to reduce DOM size.

3Use React.memo or similar techniques to prevent re-rendering unchanged components.

Performance Quiz - 3 Questions

What is the main benefit of using keys when rendering lists in React?

A It reduces the bundle size by removing unused code.

B It prevents the browser from loading images multiple times.

C It helps React identify which items changed to update only those.

D It automatically caches the list data on the server.

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools to inspect component re-renders; record performance to see paint and layout times.

What to look for: Look for excessive re-renders and long layout or paint durations indicating inefficient rendering.