Performance & Patterns
React List Virtualization
Virtualisation renders only the rows currently visible in the viewport plus a small buffer, keeping the DOM small no matter how long the list is. Libraries such as react-window and TanStack Virtual implement it.
What is List Virtualization in React?
Virtualisation renders only the rows currently visible in the viewport plus a small buffer, keeping the DOM small no matter how long the list is. Libraries such as react-window and TanStack Virtual implement it.
Why List Virtualization matters
Ten thousand DOM nodes make scrolling stutter and memory climb, whatever you do with memo. Rendering thirty of them at a time keeps the list smooth.
List Virtualization example
import { FixedSizeList } from 'react-window';
<FixedSizeList height={600} itemCount={jobs.length} itemSize={72} width="100%">
{({ index, style }) => (
<div style={style}>{jobs[index].title}</div>
)}
</FixedSizeList>How this works
The style prop is essential — it absolutely positions each row so the scrollbar reflects the full list height while only visible rows exist in the DOM.
Key points to remember
- Worth it from roughly a few hundred rows upward.
- Variable row heights need VariableSizeList or a measuring virtualiser.
- Virtualised content is not in the DOM, so Ctrl+F and crawlers cannot see it.
Common mistakes with List Virtualization
- Dropping the style prop, which stacks every row at the top.
- Virtualising content that needs to be indexed by search engines.
React List Virtualization— Interview Questions & FAQs
At what size should I virtualise a list?+
Profile first, but a few hundred moderately complex rows is a common threshold. Below that, memoising the row component is usually enough.