There are two benefits of using something like infinite loader in lists

  • It improves the performance. You do not load all the items in DOM on one go. And you actually cycle between the items so that at any time only fixed amount of items are rendered in DOM.
  • It usually gives better user experience than using pagination of items.

What does virtualization of list mean?

It means that you do not render all the items in the list at one shot. If your array contains 100 items, you show only 10 at a time. You can use the good old technique of pagination, or you can have infinite scrolling (+windowing). Whatever technique you use, the main aim is not to render all the items at one time.

Pagination technique

Pagination technique is very common and has been around for long time. Basically, you have an index from where the list start, and then you have some sort of page navigation (either number, or next previous buttons, or both). The advantage of using pagination is

  • familiarity – People have been using pagination for long time. So there is no learning required to go through a list using page navigation.
  • If you have really long list, you can provide search feature for the users to directly search and go to a page, or sort the items either alphabatically or numerically or whatever makes sense for that list
  • The downside to having pagination is that it takes extra bit of effort for the user to navigate to next items. And the chances are high that user will leave after first page. Just think about it. How many items have you clicked on next item in Google search results page? Not many right. Whatever is seen on the first page is relevant for you. So pagination technique do not make sense to have on many items. If you have pagination on blogs, then people will not take effort to see the next page.
  • This technique is also bad on mobiles, as its not intuitive. Most of the mobile apps (be it android or ios) do not have pagination. So having one in website will certainly be not a plus point.

Infinite Scroll technique + windowing technique

In this technique, as you scroll below, the items are loaded. In order to improve performance, it is good to remove the above rendered items from dom. This technique of loading only the subset of items at any given point of time is called windowing. There are two npm packages available for windowing in react, and both of them are written by same author. react-window and react-virtualized. Here is the difference between these packages from the author itself

How is react-window different from react-virtualized?
I wrote react-virtualized several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users. 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.

Lets see how to implement a list with windowing, and then we will move to advance use cases.

Implementing a list of  items using windowing

import React, { Component } from 'react';
import { FixedSizeList as List } from 'react-window';

class App extends Component {
  render() {
    return (
      <div className="App">
          <List
          height={150}
          itemCount={1000}
          itemSize={50}
          width={300}
        >
        {
          (props=>{
            const { index, style } = props;
              return (
                <div style={style}>
                  Item {index}
                </div>
            )
          })
        }
        </List>
      </div>
    );
  }
}

export default App;