What is virtualization (windowing) and when do you need it?

Virtualization renders only the items visible in the viewport instead of the entire list. For 10,000 items, you might only render 20 DOM nodes at a time.

import { FixedSizeList } from 'react-window';

// ❌ Renders all 10,000 DOM nodes immediately
function NaiveList({ items }) {
  return items.map(item => );
}

// ✅ Renders ~20 DOM nodes, recycles them as you scroll
function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    
 {/* style positions the row */}
      {items[index].name}
    
  );

  return (
    
      {Row}
    
  );
}

When to virtualize:

• Lists with 100+ items where each item has significant DOM
• Visible performance issues (jank, slow initial render)
• Tables, feeds, chat history, autocomplete dropdowns

Libraries: react-window (smaller), react-virtual (TanStack, headless), react-virtuoso (variable heights)