Handling lists with react-window

Load large lists the intelligent way

Recently I was given the task to manipulate a huge chunk of data. The minimum number of records at any given point was around half a million. Generally, the backend guys would help us out by adding pagination to the API, but this time I was on my own(plus I was not aloud to create my own backend).

To show what happens when we try to loop through a large data array:

when looping through a huge list of data

While rendering huge list, a good practice is to use windowing/ virtualization.

Windowing

The process to only render DOM elements, that are part of the list which is visible on the DOM, is known as Windowing. This can help with performance improvements, as React need to render less DOM elements.

In my example I have a list of 23 items, but if we check the number of element rendered it is less than the items in the list.

windowing helps render items which are visible

Before using windowing, the first thing you should ask is it required?

Why I emphasised on required, is because first, you are adding a new dependency. Secondly, you get a performance boost for the initial load, but you do you require that performance?

For example, if you are working on a dashboard app, where you have multiple KPIs, many changes and calculations are happening, it would make sense; as you need to need to decrease the time to interaction. On the other hand, if the data is less and you can load it one go, rendering the list would make more sense. This is because the initial load time might be less with react-window, but React needs to re-render the list but with the second use-case the initial load might be a 100ms slower, but the whole list is rendered.

react-window

Let’s install the library:

npm i react-window

*Note: react-window is a slimmed down version of react-virtualized

react-window offers four types of components: FixedSizeList, VariableSizeList, FixedSizeGrid and VariableSizeGrid. For my example I would be using FixedSizeList, VariableSizeList.

Lets look at some of the basic props, you can pass:

• height & width: to set the size of the list container
• itemData: is the data you want to render
• itemCount: is the length on the data array
• className: for any custom styling
• itemSize: The only difference is in the VariableSizeList, the itemSize can vary and we pass a callback to calculate the size(the return type is a number).
• children: both FixedSizeList, VariableSizeList uses render props and passes the required props. As you can see in the below example, the Row uses the props to render the list item. The props include the item index, style contains the dimensions and coordinates of the item to be rendered. If itemData is defined then data prop contains the data list.

props accessible in the child component

Let’s look at the App component:

The output:

I hope this helps you understand, how different libraries to help with performance increase.

You can find the git repo here.