Rendering very large lists in React can quickly become a performance bottleneck. For example, trying to render thousands of items at once often leads to laggy UI or even browser instability. Virtualization addresses this by limiting how many elements are actually mounted in the DOM. Instead of rendering the entire list, only the items currently visible in the viewport are rendered, along with a small buffer. As the user scrolls, items that move out of view are removed, and new ones are mounted dynamically. This keeps the DOM size small and the rendering cost low. Libraries like react-window and react-virtualized make it easy to implement this pattern without handling all the edge cases manually. Normal Rendering function ItemGrid({ items }) { // All items are rendered at once return ( {items.map((item) => ( ))} ); } // Outcome: noticeable delay and UI lag when the list is very large Virtualized Rendering import { FixedSizeList as VirtualList } from 'react-window'; function ItemList({ data }) { return ( {({ index, style }) => { const item = data[index]; return ( ); }} ); } List Size Normal Rendering Virtualized Rendering Main Benefit Scrolling Experience Small lists Usually acceptable Slightly more efficient Limited impact Smooth A few hundred rows Can start feeling heavier Remains responsive Noticeable reduction in work Smooth Around 1,000 rows Often slows down Still stable Much lower rendering cost Smooth Several thousand rows Performance drops sharply Handles large datasets well Major DOM reduction Mostly smooth Tens of thousands of rows Can become impractical Still usable with tuning Very high efficiency gain May depend on row complexity The exact numbers depend on the browser, row complexity, and component structure, but the overall trend is consistent: virtualization becomes much more valuable as the list grows. When to virtualise: Lists with 50+ items Items with moderate-to-high complexity Infinite scroll implementations Tables with many rows Chat message histories When not to virtualise: Small lists (fewer than 20 items) – the overhead isn't worth it Lists that need to be fully searchable by the browser Print-friendly content SEO-critical content (virtualised content isn't included in the initial HTML) One consideration: virtualised lists require fixed or calculated heights. Items with variable heights need React Window's VariableSizeList with a measurement phase, which adds complexity. For most cases, design list items with consistent heights.