What is windowing? Also I have heard about react-window and react-virtualized… 🤔

Photo by R Mo on Unsplash

What is windowing?

Windowing or List virtualization is a concept of only rendering or write the visible portion in the current “ window ” to the DOM. The number of items that rendered at first time are smaller than the original one.

The remaining items are rendered when you scroll down to it. The DOM nodes of items that exit the window are replaced by the new ones. This improves the performance of rendering a large list.

Without windowing, the entire list is written to the DOM including items that are not in the current window. It means, you would have to wait until the entire list is written to see the first item.

Let’s try render the large list with just simple <div /> elements.

I recommend to put the maximum number would be 10,000. 😏

Hmm… first loading makes me 😥.

Oh! I have heard about react-window & react-vitualized!!!

React components for efficiently rendering large lists and tabular data

This is quoted in react-window & react-virtualized Github. ✍️

OK… These libraries can help you speed the first rendering time up! 😲Because these two libs are based on concept of windowing. But what is the different between them?

react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller1 and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).

Also this is quoted in react-windowGithub.

The react-window is newer, lighter and faster. But it provides not 100% functionality that react-virtualized has. But if the main ones solve your needs then it is recommended to use react-window first! 🤗

You can try both components here. 👇

react-window

react-virtualized

Let’s try it then!

Here’s a example of the comparison between rendering large list with react-window and simple <div />

You will see that list with windowing version appears faster at the first time because it renders only first group of items in the window. But does it has any cons? 🤨

Hmm.. the one without windowing feels faster and less flashing than the windowing one while scrolling.

No!! Both look fine for me when I scroll it. Then.. try this one 😏

You may not see the flashing after tried a fast scrolling 🥵 But the more complex item you have the more flashing you see.

So do I need to use this?

Both react-window andreact-virtualizedare great to render the large list. So if your project do not have a situation to render those… the simple rendering still ok for you otherwise you will introduce the complexity that you don’t need to have into your project.

Try to optimize your list component first, make it more simpler. And if it still doesn’t work. Let’s have a try 🤗