? Virtualization Concepts

⚡ Quick Overview

Virtualization (also called windowing) is a performance optimization technique where only visible items are rendered instead of the entire dataset.

? Key Concepts

• Render only visible items
• Reuse DOM nodes while scrolling
• Reduce memory and CPU usage
• Improve scroll performance

? Syntax / Theory

Virtualization libraries calculate which items are visible based on scroll position and viewport height. Only those items are mounted in the DOM.

⚙️ Basic Example (react-window)

// Virtualized list using react-window
import React from "react";
import { FixedSizeList as List } from "react-window";

function VirtualizedList() {
const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

return (
<List
height={300}
itemCount={items.length}
itemSize={35}
width={300}
>
{({ index, style }) => (
<div style={style}>
{items[index]}
</div>
)}
</List>
);
}

export default VirtualizedList;

Only a small subset of rows are rendered at any moment, keeping the UI fast.

? Example with react-virtualized

// Advanced virtualization with react-virtualized
import React from "react";
import { List, AutoSizer } from "react-virtualized";

function VirtualizedListRV() {
const rowRenderer = ({ index, key, style }) => (
<div key={key} style={style}>
Row {index + 1}
</div>
);

return (
<AutoSizer>
{({ height, width }) => (
<List
width={width}
height={height}
rowCount={10000}
rowHeight={35}
rowRenderer={rowRenderer}
/>
)}
</AutoSizer>
);
}

export default VirtualizedListRV;

? Live Output / Explanation

Scrolling dynamically swaps items instead of loading everything at once, resulting in smooth performance even with very large datasets.

? Use Cases

• Chat applications
• Large data tables
• Dashboards and logs
• Infinite scrolling lists

? Interactive Example

Scroll the box below. While there are 100,000 items in the list, only about 10-15 DOM nodes exist at any time.