Photo by Marc-Olivier Jodoin

If we want to render a large number of items, for example, 10.000 items, it will take a little time before the items show in the browser. Try to hit the show button below and notice that there is a delay before the items show

Did you notice the delay? This happens because the browser needs to create 10.000 DOM nodes and put them into the document. The number of items is too much that causes the browser busy to render it.

So, we need to reduce the number of items that we render. For example, if you change the item count to only 1.000, it will no longer delay again. Try to change the item count to only 1.000 and hit the show button. Notice that there is no delay.

So reducing the number of items that will be rendered is a working solution, but, how if we still need to render 10.000 items? The solution is using windowing

What is Windowing

Windowing is a technique to optimize the rendering performance of a large number of items by rendering the items that only visible by the user. When the user scrolls down, the previous items will be changed into the next items. If we need to render 10.000 items, the browser will only render the items that visible to the user, for example, 10 items.

How is The Comparison

Here is the implementation of windowing using react-window. You can see the comparison below

Notice that there will be no delay when we use windowing to render a large number of items. This happens because we just render 11 items, then if we scroll down, the next items will be rendered and change the previous items

The Disadvantage

Because the next items are rendered as we scrolling, sometimes if we scrolling down too fast, the next items still not rendered, especially when the UI of the item is more complex