Rendering lists in React - Performance & Optimization

Performance: Rendering lists in React

MEDIUM IMPACT

This affects how fast the page renders and updates when showing multiple items, impacting user interaction smoothness and load speed.

Rendering a list of items with React

React

const List = ({ items }) => items.map(item => <li key={item.id}>{item.name}</li>);

Using unique stable keys lets React update only changed items, minimizing re-renders.

📈 Performance GainReduces re-renders to changed items only, improving responsiveness and lowering CPU usage.

Rendering a list of items with React

React

const List = ({ items }) => items.map((item, index) => <li key={index}>{item}</li>);

Using array index as key causes React to re-render all items on changes, leading to inefficient updates.

📉 Performance CostTriggers re-render of entire list on item change, increasing CPU work and slowing interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Index as key	High (all items updated)	Many (each update triggers layout)	High (repaints all items)	[X] Bad
Unique stable keys	Low (only changed items updated)	Few (minimal layout recalculations)	Low (paints only changed items)	[OK] Good
Render all large list	Very high (thousands of nodes)	Many (heavy layout)	Very high (large paint area)	[X] Bad
Virtualized list	Low (only visible nodes)	Few (small layout area)	Low (small paint area)	[OK] Good

Rendering Pipeline

React reconciles the list using keys to decide which DOM nodes to update, then browser recalculates styles, layouts, and paints only changed parts.

→Reconciliation

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckReconciliation and Layout stages are most expensive when keys are unstable or list is large.

Core Web Vital Affected

INP

This affects how fast the page renders and updates when showing multiple items, impacting user interaction smoothness and load speed.

Optimization Tips

1Always use unique and stable keys for list items to minimize re-renders.

2Avoid rendering very large lists all at once; use virtualization libraries.

3Check React DevTools and browser Performance panel to spot expensive list updates.

Performance Quiz - 3 Questions

Why should you avoid using array index as key when rendering lists in React?

A It increases the bundle size significantly.

B It makes the list items invisible in the DOM.

C It causes React to re-render all items on any change, hurting performance.

D It disables React's event handling on list items.

DevTools: Performance

How to check: Record a profile while interacting with the list, then inspect the flame chart for long scripting or layout times during updates.

What to look for: Look for large blocks of scripting or layout time when list updates happen; fewer and shorter blocks indicate better performance.