Virtual lists play an essential role in today's web because sometimes, we need to render lists with many items (think about hundreds or even thousands!) or lists with components that are expensive in terms of performance.

If we need to display a list that contains 5000 items, that means that we'll need to create at least 5000 elements in the DOM. That's expensive and will probably take a bit of time. But that's the best-case scenario; lists are usually composed of items with many elements. If we add up everything, we'll need to render thousands and thousands of elements. That's REALLY EXPENSIVE!

Virtual lists solve that, allowing you to render only the items that fit on the user's screen. Each time the user scrolls, the lists automatically render new items and remove the ones you left behind. This is awesome, as we won't be wasting resources for elements that won't be on screen unless the user wants to see them!

I'm releasing React Hyper Scroller v3 today, a library that allows you to use virtual lists in your React apps and websites. You'll see that it is not a v1, but a v3, that's because I originally created this library to solve the problems of one of my projects, Kiddle. These issues are scroll restoration and the ability to render lists of items with unknown sizes.

React Hyper Scroller's main features are solving these issues, but another one is great DX (Developer Experience). Here's an example from the documentation:

import HyperScroller from "react-hyper-scroller";

// List of random numbers from 50 to 300 (inclusive).
// These number represent the height of each item in the list.
// We do this to simulate a list of items with unknown height.
const items = new Array(100)
  .fill(0)
  .map(() => Math.floor(Math.random() * 150) + 50);

export function MyList() {
  return (
    <HyperScroller estimatedItemHeight={175}>
      {items.map((item, index) => (
        <div key={`item-${index}`} style={{ height: item }}>
          Item {index}. Height: {item}
        </div>
      ))}
    </HyperScroller>
  );
}

One thing to keep in mind is that React Hyper Scroller may not be the best for all use-cases. If it doesn't work for you, there are very cool alternatives like react-window, react-virtualized or react-virtual.

Want to know more about React Hyper Scroller?

• Documentation Website
• Getting Started
• GitHub Repository