One of first learning segments I am working on is about virtual lists, what they are, why we use them, and how to create your own from scratch!

Before we can get to building something, or choosing a solution (like a virtual list), we should first have a problem where we need the thing we are building.

Lots of optimizations come with a cost. Optimizations aren't always more performant, even though the name "optimization" gives the illusion that it is. The other cost is the abstraction or sometimes confusing code you'll have to maintain this new optimization.

When building applications, its only a matter of time before you are asked to render large data sets to the screen. To use a concept we all know, imagine you had to create Twitter. Twitter has an endless amount of tweets you can scroll through. Now imagine what that can do to the performance of the browser or your non browser application. To scroll through tweets, you need to put these tweets in render all of these tweets to the screen. Eventually you will hit a problem where your first render will be expensive since you would have to render thousands of tweets.

The "simple" solution, introduced to the web in the early 2000s, would be to only render what could fit on the page, and ajax more once you hit the bottom of the page. This is a technique that combines a backend that can paginate requests, and client code that knows when to request more data and render it.

Virtual lists can work in this way as well, but it is a bit smarter. Not only will a virtual list only render what could be visible, but it will remove items from the screen as you scroll away from them, where the user would never see them anyway. This helps with memory, animations, and overall better user experience when done correctly.

Want to build one from scratch so you can understand this concept fully? Subscribe to our newsletter and be one of the first readers to learn how to build one!