React-Virtualized for efficiency rendering

I came across react-virtualized on Twitter and didn't understand what it did until I read one line from their docs:

The list below is windowed (or "virtualized") meaning that only the visible rows are rendered

That clicked immediately. If you have 10,000 items in a list, the browser renders 10,000 DOM nodes. Each node costs memory. Each mutation costs time. Virtualization renders only the ~20 rows visible on screen and recycles DOM nodes as you scroll. The user sees a 10,000-item list. The browser handles 20 nodes.

I used it immediately on a project and the difference was dramatic.

How it works

The core idea: render a container with a fixed height and overflow scrolling. Calculate which items fall within the visible viewport. Only render those items. As the user scrolls, swap in new items and remove old ones.

import { List } from 'react-virtualized'

const rowRenderer = ({ index, key, style }: any) => (
  <div key={key} style={style}>
    Row {index}
  </div>
)

const MyList = () => (
  <List
    width={300}
    height={600}
    rowCount={10000}
    rowHeight={30}
    rowRenderer={rowRenderer}
  />
)

You tell the List component the total number of rows, the height of each row, and how to render a single row. It handles the rest -- calculating scroll position, determining visible rows, and recycling DOM elements.

When to use it

Virtualization shines when you have hundreds or thousands of items. Tables, feeds, chat histories, log viewers -- anything where the dataset is large and the items have a consistent structure.

For lists under ~100 items, virtualization adds complexity without visible benefit. The DOM handles 100 elements fine.

The trade-offs

Virtualized lists require fixed or predictable row heights. If your rows are dynamic heights, you need to measure them first (or use CellMeasurer from the library, which adds complexity).

Search-in-page (Cmd+F) doesn't work on items that aren't rendered in the DOM. Screen readers may struggle with content that appears and disappears as you scroll. Accessibility needs careful attention.

Also worth noting: react-virtualized is mature but has been succeeded by react-window (by the same author), which is smaller and simpler. For new projects, I'd start with react-window or @tanstack/react-virtual. Use react-virtualized when you need its advanced features like multi-column grids or infinite loading built in.