ScrollLoader

() => {
  const maxItems = 50;
  const pageSize = 10;
  const [items, setItems] = React.useState(() => new Array(pageSize).fill(0));
  const [loading, setLoading] = React.useState(false)
  const canLoadMore = items.length < maxItems

  const loadMore = () => {
    window.setTimeout(() => {
      setItems(items => [...items, ...new Array(pageSize).fill(0)]);
    }, 500)
  };

  return (
    <Box>
      Rendered Items: {items.length}
      <Box sx={{ maxHeight: 200, overflowY: 'auto' }}>
        <List dense>
          {items.map((_, index) => {
            // NOTE: you should rarely use index in real world implementations as keys
            const labelId = `list-${index}`;
            return (
                <ListItem key={index} button>
                  <ListItemAvatar>
                    <Avatar alt={`Avatar n°${index + 1}`} />
                  </ListItemAvatar>
                  <ListItemText id={labelId} primary={`Item ${index + 1}`} />
                </ListItem>
              );
            })}
          {canLoadMore && (<ScrollLoader load={loadMore} />)}
        </List>
      </Box>
    </Box>
  );
};