react-window

react-window is a lightweight, high-performance library for rendering large lists and tabular data in React. Its primary purpose is to solve the "list virtualization" problem, where rendering thousands of items in a standard way (e.g., using `Array.map`) can lead to significant performance bottlenecks, slow initial renders, and choppy scrolling.

Instead of rendering all items in a large list, react-window employs a technique called "windowing" or "virtualization." This means it only renders the items that are currently visible within the viewport (the "window") and a small buffer around it. As the user scrolls, react-window dynamically replaces the items outside the viewport with new items that become visible, recycling the existing DOM nodes. This approach drastically reduces the number of DOM elements that need to be managed by the browser, leading to:

* Improved Performance: Faster initial load times and smoother scrolling, even with very large datasets.
* Reduced Memory Consumption: Fewer DOM nodes mean less memory usage, which is especially beneficial on resource-constrained devices.

react-window offers several components for different use cases:
* `FixedSizeList`: For lists where all items have the same height (for vertical lists) or width (for horizontal lists).
* `VariableSizeList`: For lists where items can have different heights or widths.
* `FixedSizeGrid`: For grids where all rows have the same height and all columns have the same width.
* `VariableSizeGrid`: For grids where rows and columns can have different sizes.

Key props commonly used across these components include:
* `height`: The height of the list/grid container.
* `width`: The width of the list/grid container.
* `itemCount`: The total number of items in the list/grid.
* `itemSize`: The size (height for vertical lists, width for horizontal lists) of each item (for `FixedSizeList`/`FixedSizeGrid`). For `VariableSizeList`/`VariableSizeGrid`, a function is passed to determine item size.
* `children`: A render prop (function) that react-window calls to render each visible item. This function receives an object with `index` (the item's index) and `style` (critical for positioning the item).
* `itemData`: Optional data that can be passed down to the `children` render prop without causing re-renders of the list when the data itself changes (only when `itemCount` changes or `itemData` is a new reference).

react-window is generally preferred over its predecessor, `react-virtualized`, for new projects due to its smaller bundle size, simpler API, and focus on core virtualization.

import React from 'react';
import { FixedSizeList } from 'react-window';

// --- Data Simulation ---
const bigListOfItems = Array.from({ length: 10000 }, (_, index) => ({
  id: index,
  name: `Item ${index + 1}`,
  description: `This is a detailed description for item number ${index + 1}. It could be quite long.`,
}));

// --- Row Component for FixedSizeList ---
// The 'style' prop is critical! react-window passes positioning styles here.
// DO NOT try to set position or size properties directly on this component's root.
const Row = ({ index, style }) => {
  const item = bigListOfItems[index];
  const isEven = index % 2 === 0;

  return (
    <div style={{ ...style, backgroundColor: isEven ? '#f0f0f0' : '#ffffff', padding: '10px' }}>
      <h3 style={{ margin: '0 0 5px 0' }}>{item.name}</h3>
      <p style={{ margin: '0', fontSize: '0.9em', color: '#555' }}>{item.description}</p>
    </div>
  );
};

// --- Main App Component ---
function App() {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>React Window Example: FixedSizeList</h1>
      <p>
        Below is a virtualized list containing 10,000 items. Only a small subset of items are
        rendered in the DOM at any given time, demonstrating `react-window`'s performance benefits.
      </p>

      <div style={{ border: '1px solid #ccc', borderRadius: '5px', overflow: 'hidden' }}>
        <FixedSizeList
          height={400} // The height of the visible window for the list
          width={'100%'} // The width of the visible window for the list
          itemCount={bigListOfItems.length} // Total number of items in the list
          itemSize={80} // The fixed height of each item in pixels
        >
          {Row} {/* This is our Row component, passed as a render prop */}
        </FixedSizeList>
      </div>

      <p style={{ marginTop: '20px' }}>
        Scroll through the list to see how `react-window` efficiently renders items on demand.
      </p>
    </div>
  );
}

export default App;