📦 Virtualization in React

Virtualization is a performance technique where only the visible portion of a long list is rendered to the DOM. This is essential when working with large datasets, improving rendering speed and memory usage.

⚠️ 1. Why Use Virtualization?

• Rendering thousands of DOM nodes can cause lag
• Most users only see a small portion of the list at once
• Virtualization skips rendering off-screen elements

🚀 2. Using react-window

npm install react-window

Example using FixedSizeList from react-window:

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

const Row = ({ index, style }) => (
  <div style={style}>Row #{index}</div>
);

function MyVirtualList() {
  return (
    <List
      height={400}
      itemCount={1000}
      itemSize={35}
      width={"100%"}
    >
      {Row}
    </List>
  );
}

🧩 3. Features of react-window

• Supports vertical & horizontal scrolling
• Fixed or variable item sizes
• Lightweight & performant
• Compatible with infinite scroll, lazy loading

⚖️ 4. react-window vs react-virtualized

• react-window: Lightweight, newer, simpler API
• react-virtualized: More features (grids, tables), but heavier
• Use react-window for most basic use cases

✅ 5. When to Use Virtualization

• Rendering 100+ items in a list or table
• Visible lag during scroll or interaction
• Infinite scrolling interfaces