List Virtualization: Render Large Lists Efficiently
List virtualization renders only the items currently visible in the viewport plus a small overscan buffer. This keeps DOM node count low (~10-20) even with 10,000+ items, dramatically improving scroll performance, memory usage, and initial render time.
Instead of building the entire 10,000-item wall (huge DOM, slow scrolling), you only build the small section the user can currently see through a moving window, plus a little extra on each side for smooth movement.
1Fixed Size Lists
Use when all items have the same height. Extremely fast and simple.
import { FixedSizeList } from 'react-window';
<FixedSizeList
height={600}
itemCount={10000}
itemSize={80}
width="100%"
overscanCount={5}
>
{Row}
</FixedSizeList>2Variable Size Lists
For items with dynamic heights. Requires height estimation and cache management.
3Grid Virtualization & Infinite Scroll
Use FixedSizeGrid for 2D layouts. Combine with InfiniteLoader for infinite scrolling.
4Advanced Patterns
Scrolling to items, memoized rows, custom scrollbars, and accessibility support.
| Property | Regular List | Virtualized List |
|---|---|---|
| Memory | High | Very low |
| Best For | Small lists (< 100 items) | 100+ items |
| Dom Nodes | All items (10,000+) | ~10-20 |
| Scroll Fps | ~15fps | 60fps |
Regular List
Memory
High
Best For
Small lists (< 100 items)
Dom Nodes
All items (10,000+)
Scroll Fps
~15fps
Virtualized List
Memory
Very low
Best For
100+ items
Dom Nodes
~10-20
Scroll Fps
60fps
Common questions
- ›“How do you render a list of 10,000 items efficiently?”
- ›“Explain how react-window works.”
- ›“What are the trade-offs of virtualization?”
- ›“How do you implement infinite scroll with virtualization?”
What interviewers look for
- Understanding of windowing and recycling
- Knowledge of FixedSizeList vs VariableSizeList
- Awareness of overscan, item keys, and accessibility
- Practical patterns (InfiniteLoader, memoization)
Short answer (60 sec)
Use react-window's FixedSizeList or VariableSizeList to render only visible items + overscan buffer. This keeps the DOM small and scrolling smooth even with massive datasets.
Detailed answer (senior level)
Virtualization recycles DOM nodes as the user scrolls. FixedSizeList is fastest for uniform heights. VariableSizeList handles dynamic content but needs good height estimation and cache resets. Combine with InfiniteLoader for infinite scroll. Always memoize row components and use stable keys. Test with large datasets and monitor scroll performance.
- Virtualizing small lists (< 100 items)
- Not providing accurate item heights in VariableSizeList
- Forgetting overscanCount (jerky scrolling)
- Not memoizing row components
- Ignoring accessibility (ARIA roles, focus management)
- ✓Virtualization renders only visible + buffer items
- ✓FixedSizeList for uniform heights, VariableSizeList for dynamic
- ✓Use InfiniteLoader for infinite scrolling
- ✓Memoize rows and use stable keys
- ✓Add proper ARIA attributes for accessibility
- ✓Measure with large datasets — don't guess
- ✓Combine with code splitting for optimal results
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.