Virtualizing large lists
List virtualization consists of just rendering items visible to the user. Essentially, when the user scrolls, we programmatically show the relevant items that should appear in the DOM and hide those that shouldn't.
Looking at our Amazhop website, you have probably noticed that we're rendering the whole products array even if a given product is not visible in the viewport. This is not an issue if we're rendering the first 10 products, but what about rendering 5,000 products, creating 5,000 nodes with 5,000 images when probably only 5 can be displayed? This makes no sense.
That's why some React folks created some libraries such as react-window and react-virtual, which reduce the amount of work and time required to render the initial page and, of course, for the process of updating this data.
In the next section, we'll see some React optimizations that we can include in our Amazhop application to avoid unnecessary re-renders and...
