Creating Beautiful Virtualized Lists with Material-UI and React Virtuoso
Tags: react, material, javascript
Published: 2019-05-28 16:38:16

If you did not get the news, [Material-UI v4 is out](https://material-ui.com/blog/material-ui-v4-is-out/). Awesome announcement indeed; the Material Design system is amazing. And a mature, popular, open-source react library that implements the material design specs? We live in great times. 

My goal with the [React Virtuoso](https://virtuoso.dev) library is to provide "chromeless" engine components which complement and power-up exiting UI libraries with advanced virtualization behavior. Version 0.6 allows you to replace the component structure with components of your choice. Today, we will use the Material-UI list components as containers in React Virtuoso to build a Material-looking virtualized list.

The final result looks like this:
{% stackblitz github-hv734y view=preview %}

Ready? Go!

## Step 1: Hello World 

A relatively modest step - we power up a new Stackblitz react project, and add the starter Virtuoso example - a list with 500 `Item {index}` items. the Virutoso component configuration is easy; you pass some dimensions (you can pass anything, including `%`, `rem`, etc), the total of items to render, and the `item` render prop. The component figures out the rest for you.

{% stackblitz github-hh6j8f view=editor file=src/index.js %}

## Step 2: Add material UI 

Let's make that list stylish! By default, Virtuoso renders its list container as a `div`, and each individual item in a `div` wrapper. We swap those for their Material-UI counterparts by specifying the `ListContainer` and `ItemContainer` properties. They render `ul` and `li` under the hood - works for us! 

{% stackblitz github-ybd8u6  view=editor file=src/index.js %}

## Step 3: Add real (fake) data

Displaying `Item 40` is quite boring, and, most likely, not what you need in your project. Let's show real data. Or at least, something that looks more convincing. In the next step, we generate a set of 500 user records using the [awesome faker library](https://www.npmjs.com/package/faker) and display them in the list. We also make the list structure more complex by adding an avatar to each item. To keep up with the trends, we separate the data from the presentation by putting the user record generation in a reusable hook.

{% stackblitz github-4pvb43  view=editor file=src/data.js %}

## Final step - endless scrolling

This is the most interesting part of the exercise. Loading 500 records in a single step is not a good idea. Instead, we start the list with 50 records, and add more when the user scrolls down. The hook we did in the previous step comes in handy; we extend it further to expose a `loadMore` method which simulates a roundtrip to the server and appends more records to the existing array. The `loadMore` call is wired up to Virtuoso's `endReached` callback property.

We also introduce two other minor enhancements: a footer which displays `loading...` in case the user scrolls too fast, and an `overscan` property which controls the eagerness of the load more behavior. 
{% stackblitz github-hv734y view=editor file=src/index.js %}

And, we are done! Was it shorter and simpler than expected? Are you looking for more? If so, go and check [the advanced example](https://virtuoso.dev/material-ui-endless-scrolling/) in the docs - In addition to the above, it shows grouping with sticky items, optimizing the scrolling experience by hiding the avatars during scrolling.