What is windowing? Also I have heard about react-window and react-virtualized… 🤔
Tags: react, javascript
Published: 2019-11-17 13:50:12


##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](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction). 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**_.

![waiting](https://media.giphy.com/media/tXL4FHPSnVJ0A/giphy.gif "Waiting")

Let's try render the large list with just simple `<div />` elements.
I recommend to put the maximum number would be 10,000. 😏

{% codesandbox n7kdd %}

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](https://github.com/bvaughn/react-window) and [react-virtualized](https://github.com/bvaughn/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](https://github.com/bvaughn/react-window) is a complete rewrite of [react-virtualized](https://github.com/bvaughn/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-window](https://github.com/bvaughn/react-window) Github.

The [react-window](https://github.com/bvaughn/react-window) is newer, lighter and faster. But it provides not 100% functionality that [react-virtualized](https://github.com/bvaughn/react-virtualized) has. But if the main ones solve your needs then it is recommended to use [react-window](https://github.com/bvaughn/react-window) first! 🤗
You can try both components here. 👉 [react-window examples](https://react-window.now.sh/) & [react-virtualized examples](https://bvaughn.github.io/react-virtualized)


---

##Let's try it then!

![start](https://media.giphy.com/media/ZWbeEcbeo0cKI/giphy.gif "Start")

Here's a example of the comparison between rendering large list with [react-window](https://github.com/bvaughn/react-window)and simple `<div />`

{% codesandbox 8ofs8 %}

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 😏

{% codesandbox exrlx %}

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](https://github.com/bvaughn/react-window) and [react-virtualized](https://github.com/bvaughn/react-virtualized) are 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.

![fire](https://media.giphy.com/media/g79am6uuZJKSc/giphy.gif "Fire")

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