Performance & Optimization
How to Render 100000 Items in React Without Crashing the Browser
Rendering large lists kills performance. Virtualization only renders visible items. Learn react-window vs react-virtuoso and when to use each.
Rendering 10000 plus DOM nodes causes jank, high memory usage, and slow scrolling. Virtualization fixes this.
The Problem
// This creates 100000 DOM nodes and the browser freezes
{items.map(item => <Row key={item.id} data={item} />)}
Solution: Virtualization
Only render items currently visible in the viewport (around 20-50 items instead of 100000).
react-window (Lightweight)
import { FixedSizeList } from 'react-window';{items[index].name}
)}
react-virtuoso (Feature Rich)
Supports variable heights, grouped lists, infinite scroll, and table virtualization out of the box.
When to Virtualize
- ●100 plus items: Consider it
- ●1000 plus items: Definitely virtualize
- ●10000 plus items: Mandatory
See our React projects and services.
ReactVirtualizationPerformanceLarge Listsreact-window
MD
Written by M Daniyal Amjad Ali
Full Stack Software Engineer with 5+ years of experience. Expert in Next.js, React, Node.js, and Prisma. 100+ projects delivered worldwide.