List Virtualization in React

Rendering large lists or tables in React can cause performance issues. If you render thousands of DOM nodes at once, the browser may lag or even crash.

List virtualization solves this by rendering only the visible portion of a list and reusing DOM nodes as the user scrolls.

This approach drastically improves performance for large datasets.

Why List Virtualization is Important

• Reduces the number of DOM elements rendered
• Speeds up initial rendering and scrolling
• Saves memory and improves app responsiveness
• Essential for infinite scrolling or large tables

Popular Libraries

1. Using React Window

React Window is a library for efficiently rendering large lists or tables by only rendering the items visible on the screen (virtualization). This improves performance by reducing unnecessary DOM nodes.

• Lightweight and modern library for list virtualization.
• Focuses on simple, fast rendering.

Installation

npm install react-window

Example: Virtualized List

import React from "react";
import { FixedSizeList as List } from "react-window";

const data = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);

function App() {
  return (
    <Listheight={400}        // Height of the list container
      itemCount={data.length} // Total number of items
      itemSize={35}       // Height of each item
      width={300}         // Width of the list
    >
      {({ index, style }) => (
        <div style={style}>
          {data[index]}
        </div>
      )}
    </List>
  );
}

export default App;

2. Using React Virtualized

React Virtualized is a library for rendering large lists, tables, or grids efficiently by only rendering visible items (virtualization), reducing DOM load and improving performance.

• Older and more feature-rich library.
• Includes tables, grids, and windowing, but slightly heavier than React Window.

Installation

npm install react-virtualized

Example: Virtualized List

import React from "react";
import { List } from "react-virtualized";
import "react-virtualized/styles.css";

const data = Array.from({ length: 1000 }, (_, index) => `Item ${index + 1}`);

function App() {
  const rowRenderer = ({ key, index, style }) => (
    <div key={key} style={style}>
      {data[index]}
    </div>
  );

  return (
    <Listwidth={300}
      height={400}
      rowCount={data.length}
      rowHeight={35}
      rowRenderer={rowRenderer}
    />
  );
}

export default App;

• rowRenderer → Renders each visible row
• rowHeight → Height of each row
• Only visible rows are mounted in the DOM
• Handles scrolling efficiently

React Window vs React Virtualized

Benefits of List Virtualization

• Smooth scrolling for long lists
• Faster rendering and low memory usage
• Better user experience for large datasets
• Works well with lazy loading and code splitting