Scrolling lists

When your lists contain a limited number of items in them, you're safe to just iterate over the item data, and render ListItem components. This becomes a problem when you have the potential for lists with over 1,000 items in them. You can render these items fast enough, but having this many items in the Document Object Model (DOM) eats a lot of browser resources, and can lead to unpredictable performance challenges for the user. The solution is to virtualize your Material-UI lists using react-virtualized.

How to do it...

Let's say that you have a list of 1,000 items in it. You want to render these items inside a list with a fixed height. In order to provide predictable performance characteristics...