Display Large Amounts Of Data With A Virtual List

by | Aug 7, 2020 | 0 comments

What is a virtual list? 

Virtual lists are lists that render only the visible elements inside their viewport, they allow us to efficiently render huge amounts of elements without loss of performance.

Let’s take for example Facebook’s “infinite scroll”, Facebook cannot render an infinite amount of posts for the user to view. It will load a certain amount of posts from the server, and then it will only render the posts that are in the viewport and a few before and after the visible posts to create the illusion of an infinite scroll.

When the user scrolls up or down a certain amount of pixels behind the scenes it will render the needed posts.

To illustrate this idea look at the following image, we have a mock Facebook feed with the users view inside the black box. When the user will scroll up or down and reach the blue area the list will know it needs to render more posts.

facebook-virtual-list

facebook-virtual-list

When dealing with thousands of components to display you will not only render them to the DOM, you will probably need to attach certain event listeners to enable your desired behavior. Dealing with thousand of event listeners will have a big impact on your application’s performance.

That’s why a virtual list will drastically improve your performance, it will render only a certain amount of components at a time with their respective event listeners, instead of thousands at the same time.

Final note, after playing around with Facebook’s “infinite scroll”, it seems they have mixed a virtual list with loading data from the server. When you reach the end of the scroll/list, you will see that it loads more data from the server, but the posts that have already been loaded are virtualized.

React-virtualized to the rescue

Writing a virtual list yourself might be fun as a side project but on your day to day at work you can’t waste time recreating everything you need when there are good and tested libraries available.

React virtualized is a library that provides us with components that support virtualization out of the box like: List, Grid, Table…

In-order to demonstrate the concept of a virtual list further I’ve used
react-virtualized documentation examples.

Here we have a virtual list with 10K results, see how quick the page loads and how easy it is to scroll inside the list:

react-virualized-10k

To emphasis how useful a virtual list is I’ve increased the number of rows displayed to 1 million, I’ve also enabled “show scrolling” at the top so we can see how the virtual list renders new data as we are scrolling. if you uncheck the “show scrolling” you will get a result similar to the previous image.

react-virtualized-1M

I’ve taken an example from react-virtualized docs for their virtual list:

react-virtualized list code sample:
import React from 'react';
import ReactDOM from 'react-dom';
import {List} from 'react-virtualized';

// List data as an array of strings
const list = [
  'Brian Vaughn',
  // And so on...
];

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List.
  style, // Style object to be applied to row (to position it)
}) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

// Render your list
ReactDOM.render(
  <List
    width={300}
    height={300}
    rowCount={list.length}
    rowHeight={20}
    rowRenderer={rowRenderer}
  />,
  document.getElementById('example'),
);

As you can see to use the virtual list there is not much to set up.

Import the list component.

import {List} from 'react-virtualized';

Get your list’s data / fetch it from the server:

// List data as an array of strings
const list = [
  'Brian Vaughn',
  // And so on...
];

Create a function that will receive data from the list and render each row:

function rowRenderer({
  key, // Unique key within array of rows
  index, // Index of row within collection
  isScrolling, // The List is currently being scrolled
  isVisible, // This row is visible within the List
  style, // Style object to be applied to row (to position it)
}) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

Render the list to the DOM, set the list height and width, add the number of rows you need to render, set each row height and add the rowRenderer function which will render each of our rows.

// Render your list
ReactDOM.render(
  <List
    width={300}
    height={300}
    rowCount={list.length}
    rowHeight={20}
    rowRenderer={rowRenderer}
  />,
  document.getElementById('example'),
);

Now that you are aware of the power that virtual lists can give you, I bet you can handle performance issues much better when it comes to large amounts of data.

I Hope you enjoyed this article and that it gave you VALUE.

IF YOU GOT ANY VALUE SHARE 😄