You need to show a list of 10,000 rows in React and scrolling is slow. What is list virtualization, how does it work, and what are its trade-offs?

Virtualization (also called windowing) means you render only the rows the user can see, plus a few extra above and below. The other 9,950 rows don't exist in the DOM.

How it works:

• An outer element scrolls, with a fixed height.
• An inner element gets the height of the whole list (for example 10,000 × 40px), so the scrollbar looks right.
• On scroll, the library reads scrollTop, works out which rows are in view, and renders only those.
• Each visible row is placed at its real position with transform or top.

So React renders about 30 rows instead of 10,000. Mounting is fast, memory stays low, and scrolling stays smooth. Libraries: TanStack Virtual, react-window, react-virtuoso.

Trade-offs:

• Rows with different heights are harder. The library must measure them, and the scrollbar can jump.
• The browser's find-in-page (Ctrl+F) can't find rows that aren't rendered.
• Screen readers only see the rendered rows. Add aria-rowcount and aria-rowindex or aria-setsize and aria-posinset.
• Scroll position restore and "jump to item" need extra work.

First, ask if you need all 10,000 rows at all. Pagination or "load more" may be simpler. For long pages that aren't lists, CSS content-visibility: auto lets the browser skip rendering off-screen sections without any library.