Display a huge list of entries but only render entries that are visible.

I have a large list of several thousands of entries that I want to show to the user.

I want to dispaly the entire list without pagination. But rendering all thousands of entries is performance-wise unpractical.

Instead of rendering all entries at once, the entries should be rendered only when they become visible as the user scrolls up and down the list. This technique is called "virtualization" or "lazy load".

What React libraries are there to achieve that?


Lazy load arbitrary components.

Some components are expensive to render and we want to render them only when they are visible to the user. This technique is also called *lazy loading* or *virtualization*.

Most virtualization libraries assume that the components to be lazy loaded are entries of a list and it is assumed that they are are all siblings and children of one same parent component. It is not the case in our application and the expensive components to be lazy loaded are scattered around the element tree.

Are there libraries that allow to lazy load components that are at arbitrary positions? For example passing a prop `isVisible` to the expensive components would be a solution so they can render a cheap-to-render placeholder when `isVisible===false`.


Libraries to reduce the KB size of a React app.

Are there libraries that help reduce the size of the source code transferred over the network?