Re-rendering large lists without virtualization

In React, rendering large lists without using virtualization can lead to significant performance issues, especially when dealing with hundreds or thousands of items. Virtualization is a technique that ensures only the visible portion of a list is rendered at any given time, rather than rendering the entire list all at once. This can greatly improve the performance of your application, especially when working with large datasets or long lists.

Why is Rendering Large Lists Without Virtualization a Problem?

Performance Bottlenecks: When you render a large list of items, React needs to render and update each item in the DOM. This can cause sluggish performance, especially when dealing with lists that contain hundreds or thousands of items.
Excessive Memory Usage: Rendering all the items at once increases memory consumption, as the browser needs to store the DOM nodes of all the list items in memory. This can cause memory leaks or cause the app to run out of resources.
Slower Initial Load: When a large list is rendered without virtualization, the initial page load can be slow, as the browser has to process all of the items before displaying them.
Unnecessary Re-renders: Even though React optimizes re-renders with its virtual DOM, when you render large lists, even the optimized re-renders can be slow, and each change can lead to unnecessary updates.

What is Virtualization?

Virtualization (or “windowing”) is a technique that involves only rendering the visible portion of a list (i.e., the items that are currently in the user’s viewport). As the user scrolls, new items are dynamically rendered while off-screen items are removed. This reduces the number of DOM nodes in memory at any given time.

Benefits of Virtualization:

Performance Optimization: Virtualization only renders the items that are visible, dramatically reducing the number of DOM nodes and improving rendering performance.
Memory Efficiency: Since only a small subset of the list is rendered, memory usage is significantly reduced.
Faster Initial Load: The page can load faster because fewer DOM elements need to be created and displayed.
Smooth Scrolling: Virtualization ensures that scrolling through a large list remains smooth by rendering only the visible items, preventing janky or slow scrolling.

Virtualization in React

To implement virtualization in React, you can use libraries like react-window or react-virtualized, which handle the complexities of list virtualization for you.

Example Without Virtualization (Inefficient)

Here’s an example of rendering a large list without any optimization:

import React, { useState } from 'react';

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

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default LargeList;

Issues:

The entire items array of 10,000 elements is being rendered.
The browser has to create and manage DOM nodes for all the items at once, which can slow down performance, especially on slower devices or with complex items.
Even if only a small portion of the list is visible, the entire list is still being rendered, leading to wasted memory and slower load times.

Solution: Using `react-window` for Virtualization

To avoid the performance issues associated with rendering large lists, you can use react-window to only render the visible items.

Example Using `react-window`

npm install react-window

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

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

  const Row = ({ index, style }) => (
    <div style={style}>{items[index]}</div>
  );

  return (
    <List
      height={500}  // Height of the visible area (viewport)
      itemCount={items.length}  // Total number of items in the list
      itemSize={35}  // Height of each item
      width={300}  // Width of the list container
    >
      {Row}
    </List>
  );
}

export default VirtualizedList;

Explanation:

react-window takes care of rendering only the visible items in the list.
The height prop specifies the height of the visible area of the list.
The itemCount prop indicates how many items are in the list.
The itemSize prop defines the height of each individual item in the list.
As the user scrolls, react-window will dynamically render new items and unmount those that go off-screen.

Benefits of Virtualization in This Example:

Reduced DOM Nodes: Only the visible items (those within the scrollable area) are rendered. For example, if the user can see only 20 items at once, only 20 DOM nodes are created.
Smooth Scrolling: Since only the visible items are rendered, scrolling is smooth, even with large lists.
Performance Boost: The app is much more responsive, especially when working with very large datasets.

Alternative: Using `react-virtualized`

Another popular library for list virtualization is react-virtualized. It’s similar to react-window but offers additional features like support for variable item sizes, grids, and tables.

Here’s a simple example using react-virtualized:

npm install react-virtualized

import React from 'react';
import { List } from 'react-virtualized';

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

  return (
    <List
      width={300}
      height={500}
      rowCount={items.length}
      rowHeight={35}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {items[index]}
        </div>
      )}
    />
  );
}

export default VirtualizedList;

When to Use Virtualization:

Large Lists: If you’re rendering long lists (e.g., hundreds or thousands of items) and need to optimize for performance.
Complex Items: If each list item is complex (containing images, multiple elements, etc.), virtualization helps ensure that only the visible items are rendered.
Smooth Scrolling: If you want to ensure smooth scrolling experiences, especially on mobile devices or lower-end systems.

Key Takeaways:

Virtualization: Use libraries like react-window or react-virtualized to only render the visible portion of large lists, improving performance and reducing memory usage.
Improved Performance: Virtualizing lists helps you avoid re-rendering and unnecessary DOM updates for off-screen items.
Smooth User Experience: By rendering only what’s visible, virtualization ensures a smoother scrolling experience for large datasets.