Member-only story
Virtualized Rendering From Scratch in React
Let’s understand how virtualization works
Many years ago, I was part of a development team that was creating a Flash application that had to render a lot of data. We struggled with rendering it as a list. Scrolling the list was sluggish, but I managed to come up with a solution.
Today, I’ll explain what I created back then in ActionScript 3.0. Needless to say, we will use JavaScript instead. We’ll create a pretty advanced demo and I’ll guide you through all the steps so you’ll get a solid understanding of the logic behind this very performant solution. Rendering millions of items (!) is no problem. We will get to that in the end.
I’m aware there exist third-party solutions such as the popular react-virtualized. But learning how to create virtualization yourself is a useful exercise in my opinion. Not only will you be able to customize every single aspect of the final component, but you’ll also understand all the small parts of it, which will help you in your journey to becoming the best developer you can possibly be.
Before we write some code, a few words about virtualization.
Virtualization
Virtualization means “creating something that doesn’t physically exist.” In terms of rendering a web application, you could say that it means “creating your web application in memory, but not actually rendering it in the DOM.” As an example, in memory, we define that our web application consists of one div element, but we don’t actually render that div element in the DOM of the browser.
Have a look at the following illustration:
The black-bordered box represents the viewport. Our monitor, so to speak.
On the left side, there is a list of 40 rows (the green elements) being rendered. We see ten of them on our screen, but the remaining 30 rows are also rendered. To be more precise, we instruct our browser to render them (whether or not the browser actually renders them is another story). We’ve added them to the DOM. We don’t see those rows unless we scroll down.
