Advanced performance of the reaction table for large -scale web applications | By Rully Saputra | April 2025

Make a large list of items without encountering performance problems

Have you ever tried to make a massive list of elements? Let’s say 1000k or even more? 😏

As web developers, we all know how important performance is. After all, a rapid website has a direct impact on the user experience. When you work with large lists, ensuring good performance is a must.

There are many ways to manage this, and a common solution is pagination. But what happens if I told you that there is another strategy that could be even better? 😎

Virtualization

Virtualization is a rendering strategy to optimize only by displaying only elements which are currently visible or fulfill the window.

To implement this, we will use a popular package in a react environment called react-window . It is simple, effective and makes virtualization a breeze.

I will show you how I implemented this package and I create a look in the shape of a look with react-window .

Result

Implementation

First of all, you must have data in a table. For more simplicity, I will generate hard coded data.

const data = [...Array(1_000_000).keys()].map((el) => `${el + 1}`);

The central component of react-windowthat I will use is FixedSizeList . The component helps make the list of large lists effectively.

To start, we must define the width, height, the elements to make the list correctly. Once this is done, the list will be made gently. You must add the component of the children’s list.

Children will get the index for the loop of all data and style accessories to display the list of elements.

// row component
const Row = ({ index, style }) => (
<div style={style} className="row">
<span>Col 1 {data[index]}</span>
<span>Col 2 {data[index]}</span>
<span>Col 3 {data[index]}</span>
</div>
);
// list component
<List
height={listSize.height}
itemCount={data.length}
itemSize={25}…