Virtualization for Large Lists
Rendering hundreds or thousands of list items in React is a performance killer. Even if only a few are visible at a time, React will try to render them all, causing slow initial loads and sluggish scrolling.
That’s where list virtualization comes in.
What is Virtualization?
Virtualization means only rendering the items currently visible in the viewport (plus a small buffer) instead of the entire list.
The DOM stays small, rendering is faster, and memory usage drops dramatically.
When to Use Virtualization
✅ Large tables or grids
✅ Infinite scrolling feeds
✅ Logs or chat history
✅ Dashboards with massive datasets
Popular Libraries
1. react-window
Lightweight and perfect for most use cases.
npm install react-window
Example:
import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
<List
height={400}
itemCount={items.length}
itemSize={35}
width={300}
>
{({ index, style }) => (
<div style={style}>{items[index]}</div>
)}
</List>
);
2. react-virtualized
More features (sorting, infinite loader, cell measurer) but heavier.
npm install react-virtualized
Example:
import { List } from 'react-virtualized';
const MyList = ({ items }) => (
<List
width={300}
height={400}
rowHeight={35}
rowCount={items.length}
rowRenderer={({ index, key, style }) => (
<div key={key} style={style}>
{items[index]}
</div>
)}
/>
);
Performance Gains
In one of my recent projects:
- Before: Rendering ~5,000 rows froze the UI for 2–3 seconds.
- After virtualization: First render < 100ms, smooth scrolling.
Tips for Virtualization
- Use fixed height items when possible (simpler, faster).
- For dynamic heights, use
CellMeasurerinreact-virtualized. - Keep your item components pure (
React.memo) to avoid re-renders. - Avoid expensive logic inside the row renderer.
Next.js Considerations
- Virtualization works perfectly with both CSR and SSR in Next.js.
- For SEO-critical lists, render only the first few items on the server, then hydrate with virtualization.
Final Thoughts
Virtualization is one of those optimizations that directly impacts the user experience.
When your app scrolls smoothly, users notice — and they stay.
If you haven’t tried it yet, start with react-window. It’s small, fast, and easy to integrate.
