How to implement virtual scrolling for large lists?

Question

Accepted Answer

**Virtual scrolling** renders only the **visible items** in a list, dramatically improving performance for lists with thousands of items. Instead of rendering 10,000 DOM nodes, you render only the ~20 that are visible on screen. **Using @tanstack/react-virtual (recommended):** ```tsx import { useVirtualizer } from "@tanstack/react-virtual"; import { useRef } from "react"; function VirtualList({ items }: { items: string[] }) { const parentRef = useRef(null); const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 50, // estimated row height in pixels overscan: 5, // render 5 extra items above/below viewport }); return (

{virtualizer.getVirtualItems().map((virtualRow) => (

{items[virtualRow.index]}

))}

); } ``` **Manual implementation — for learning:** ```tsx function ManualVirtualList({ items, itemHeight = 50, containerHeight = 500, }: { items: string[]; itemHeight?: number; containerHeight?: number; }) { const [scrollTop, setScrollTop] = useState(0); const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min( items.length - 1, Math.floor((scrollTop + containerHeight) / itemHeight) ); const visibleItems = items.slice(startIndex, endIndex + 1); return (

setScrollTop(e.currentTarget.scrollTop)} >

{visibleItems.map((item, index) => (

{item}

))}

); } ``` **When to use virtual scrolling:** - Lists with **1000+ items** - Chat messages, email inboxes - Data tables with many rows - Social media feeds, timeline views **When NOT to use:** - Lists with **fewer than ~100 items** — the overhead isn't worth it - Items with **variable heights** (possible but complex) - When you need **SEO** — virtual items aren't in the DOM for crawlers

React: How to implement virtual scrolling for large lists?