Common list rendering mistakes in React - Performance & Optimization

Performance: Common list rendering mistakes

HIGH IMPACT

This affects rendering speed and user interaction responsiveness when displaying lists in React.

Rendering a list of items with keys

React

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

Using stable unique keys lets React update only changed items, reducing re-renders and improving responsiveness.

📈 Performance GainOnly changed items re-render, reducing unnecessary DOM updates and improving INP.

Rendering a list of items with keys

React

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

Using index as key causes React to re-render all items on list changes, hurting performance and causing UI glitches.

📉 Performance CostTriggers re-render of entire list on any item change, increasing INP and causing layout thrashing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Index as key	High (all items re-render)	Many (on any change)	High (full list repaint)	[X] Bad
Stable unique keys	Low (only changed items)	Few (minimal)	Low (partial repaint)	[OK] Good
Rendering full large list	Very high (thousands of nodes)	Many (heavy layout)	Very high (full repaint)	[X] Bad
Virtualized list	Low (only visible nodes)	Few (small layout)	Low (small repaint)	[OK] Good
Inline functions in render	Causes extra re-renders	Extra reflows due to re-renders	Increased paint cost	[X] Bad
Memoized callbacks	Stable renders	Minimal reflows	Reduced paint cost	[OK] Good

Rendering Pipeline

React uses keys to identify list items and decide which DOM nodes to update. Bad keys or large lists cause excessive Layout and Paint steps, slowing rendering.

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation and Layout stages become expensive with unstable keys or large DOM trees.

Core Web Vital Affected

INP

This affects rendering speed and user interaction responsiveness when displaying lists in React.

Optimization Tips

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

2Virtualize large lists to reduce DOM nodes and improve load time.

3Avoid creating new inline functions inside render to prevent extra re-renders.

Performance Quiz - 3 Questions

Why is using array index as key in React list rendering a bad practice?

A It causes React to re-render all items on any list change.

B It improves rendering speed by simplifying keys.

C It reduces memory usage by using smaller keys.

D It prevents React from rendering the list.

DevTools: React DevTools and Chrome Performance panel

How to check: Use React DevTools Profiler to record rendering and see which components re-render. Use Chrome Performance to check main thread activity and layout times.

What to look for: Look for excessive re-renders of list items and long scripting or layout tasks indicating inefficient list rendering.