Virtualization

Windowing, react-window, react-virtualized, and rendering large lists.

Overview

Virtualization renders only visible items, enabling smooth performance with thousands of items.

Key Concepts

• Windowing — Render only visible items in viewport
• react-window — Lightweight virtualization library
• react-virtualized — Feature-rich virtualization
• Variable Size — Handle items with different heights
• Infinite Scrolling — Load more items on scroll

Code Examples

import { FixedSizeList as List } from 'react-window';

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style} className="list-item">
      {items[index].name}
    </div>
  );

  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </List>
  );
}

// Variable size list
import { VariableSizeList as VList } from 'react-window';

function VariableList({ items }) {
  const getItemSize = (index) => {
    return items[index].expanded ? 100 : 50;
  };

  const Row = ({ index, style }) => (
    <div style={style}>
      <div className="item-header">{items[index].title}</div>
      {items[index].expanded && (
        <div className="item-content">{items[index].content}</div>
      )}
    </div>
  );

  return (
    <VList
      height={600}
      itemCount={items.length}
      itemSize={getItemSize}
      width="100%"
    >
      {Row}
    </VList>
  );
}

Practice

Build an infinite scrolling photo gallery with virtualization.