React List Virtualization: Speed Up Your UI

Slow Lists Are Bad. Really Bad.

You’re building a React application, and it needs to display a long list of items. Maybe it’s a list of users, products, or log entries. You start by mapping over your data and rendering components. It works fine for a few dozen items. Then, your list grows to hundreds, thousands, or even tens of thousands. Suddenly, your application grinds to a halt. Scrolling becomes laggy, the UI feels unresponsive, and users get frustrated. This isn’t just an annoyance; it’s a performance killer.

The problem is simple: React, by default, tries to render everything. When you have a massive list, creating and mounting thousands of DOM nodes is incredibly expensive. Each component has its lifecycle, each DOM node has its memory footprint, and the browser has to do a lot of work to keep track of it all, even the items that are completely off-screen.

What If We Only Render What’s Visible?

This is the core idea behind virtualization. Instead of rendering the entire list at once, we only render the items that are currently visible within the viewport (plus a small buffer). As the user scrolls, we dynamically update which items are rendered, discarding the ones that scroll out of view and adding the new ones that come into view. This dramatically reduces the number of DOM nodes the browser has to manage, leading to significant performance improvements.

Introducing react-window and react-virtualized

There are several libraries that help implement virtualization in React. Two of the most popular are react-window and react-virtualized. react-window is generally recommended for newer projects due to its smaller size and simpler API, while react-virtualized is more feature-rich but larger.

Let’s focus on react-window because it’s often the best starting point.

Getting Started with react-window

First, install the library:

1
npm install react-window
2
# or
3
yarn add react-window

react-window provides several components. The most common ones are FixedSizeList and VariableSizeList. If all your list items have the same height, FixedSizeList is the way to go. If item heights vary, you’ll use VariableSizeList.

Let’s look at an example using FixedSizeList.

Example: Fixed Height List

Say you have an array of items. You want to display them in a list where each item has a fixed height, say 50 pixels.

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

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

6
const Row = ({ index, style }) => (
7
  <div style={style}>
8
    {items[index]}
9
  </div>
10
);
11

12
const MyLargeList = () => (
13
  <List
14
    height={300} // The height of the list container in pixels
15
    itemCount={items.length} // The total number of items in your data
16
    itemSize={50} // The height of each list item in pixels
17
    width={300} // The width of the list container in pixels
18
  >
19
    {Row}
20
  </List>
21
);
22

23
export default MyLargeList;

Let’s break this down:

• height: This is the visible height of your list component on the screen. Only items within this height will be rendered.
• itemCount: This is the total number of items you have in your data, not how many are rendered. react-window uses this to know how many items could potentially be rendered.
• itemSize: Crucial for FixedSizeList. It’s the exact height of every single item in your list. This allows react-window to calculate how many items fit within the height and the scroll offsets.
• width: The width of your list container.
• Row component: This is a simple component that receives index (the index of the item in your data) and style (which contains the top, left, width, and height CSS properties applied by react-window to position the item correctly within the scrollable container). It’s essential that your Row component applies the style prop directly to its root element.

Considerations for Variable Size Items

If your list items have different heights (e.g., varying text content), FixedSizeList won’t work. You’ll need VariableSizeList. This component requires a itemSize prop that’s a function: itemSize={index => heightOfItemAtIndex}. You’ll also need to know or estimate item heights. If heights are truly dynamic and unknown beforehand, react-window provides mechanisms to measure them, but it adds complexity.

Performance Payoff

By adopting virtualization, you’re trading the cost of rendering thousands of components for the cost of rendering a handful (typically 10-20) and dynamically re-rendering them as the user scrolls. The difference in performance can be staggering, transforming a sluggish interface into a buttery-smooth experience. This is especially important for user-facing applications where responsiveness is key.

Final Thoughts

Virtualization isn’t a magic bullet for all performance issues, but for large lists, it’s one of the most effective techniques you can employ. Libraries like react-window make it relatively straightforward to implement. So, if you’re struggling with slow-loading lists, give virtualization a try. Your users will thank you.