React Material-UI Cookbook

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 for your users, you only want to render items that are actually visible to the user as they scroll through the list. Here's the code:

import React, { useState } from 'react';import { List as VirtualList, AutoSizer } from 'react-virtualized';import { makeStyles } from '@material-ui/styles';import List from '@material-ui/core/List';import ListItem from '@material-ui/core/ListItem';import ListItemText from '@material-ui/core/ListItemText';import Paper from '@material-ui/core/Paper';const useStyles = makeStyles(theme => ({  list: {    height: 300  }, paper: ...