Virtual scrolling for lists over 100 items

Rendering 500 list items in the DOM simultaneously creates 500 DOM nodes with layout, paint, and event handling overhead — even for items the user cannot see. Scroll performance on a fully-rendered 10,000-row table degrades to 10–20fps on mid-range devices because every scroll event triggers layout recalculation for all 10,000 nodes. ISO 25010:2011 resource-utilisation captures the memory cost; the user-visible failure is a janky, unresponsive list that makes the application feel broken for users browsing large datasets.

Replace full-render lists with a windowing library. react-window (lightweight) and @tanstack/react-virtual (flexible) both render only visible rows.

// components/product-list.tsx — virtual scrolling for 100+ items
import { FixedSizeList, ListChildComponentProps } from 'react-window'

function Row({ index, style }: ListChildComponentProps) {
  return <div style={style}>{products[index].name}</div>
}

export function ProductList({ products }: { products: Product[] }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={products.length}
      itemSize={48}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}