Virtualisation for Everyone with Virtuoso


How do apps like Instagram and Google Photos handle the endless scrolling they have acclimated their users? You might've noticed that pages have gone out of fashion and infinite scroll is where it's at.

But, how is it possible to render so much content without slowing down load times and causing a loss in performance? The answer,

Virtualisation.

Without going into too much depth, if you can't see it, it simply doesn't exist. Instead, the height of possible items is calculated and the margin is the estimated length of all your content.

This makes it look like you have loaded everything without loading everything all at once. Using libraries like react-window and virtuoso make this easy (so long as your content can be estimated).

Virtuoso allows easy rendering of not just vertical lists but also tables and grids of items, provided that they are once again. All the same size.