React virtual rendering

Ever wonder how to render a huge numbers of records in a react component and not killing your browser. For example rendering a list with thousands of items or a datagrid with a high density of columns and rows.

One way of solving this problem is to use a technique call “virtual rendering”.The basic idea of “VR” is to only render what the user sees, keeping the number of rendered object to the minimum.

A typical use of “VR” with React will be the implementation of a list component that contains thousand of elements.In this post I going to show how easy is to implement a React Component that uses the “virtual render” technique.Here is the complete example in jsfiddle.

To begin the first thing that we need is a viewPort area. This area is the one that is going to be responsible to contain the visible items of the list and have a scrollbar that enable the user to navigate through all the items.

The code for this example can be found at github

To accomplish this in html we are going to create a div call “viewport” and inside we are going to add another div which height is going to be h=height of a row * number of rows. So now the viewport div is going to be able to scroll with the right scroll length , the last thing to do is add to our the view port css the property overflow-y: scroll .

So lets put this together in a react component and add a simple class for render rows that we are going to call “Item”. The code and the css will look like this:

So now lets create some data and initialise our component state.
We are going to create some important variables:

1. The height of a row ( itemheight )that we are going to pass as a property
2. With itemheight we can calculate the total height of the itemcontainer div (h= itemheight * numRows) and we are going to create a variable call ( containerStyle ) to use as an inline style.
   3.The number of visible items in the viewPort ( numVisibleItems )=viewPort.height/ itemheight
   4.We are going to initialise the state with that will contain the index of the rows to render.

Now that we have all set up we also can create a renderRows method that using start and end can render the visible rows.

The renderRow method is where all the magic happens, here we only render the visible elements and we position each item to his right top matching with the position of the scroll bar of the viewport div.

That is cool now we have a list that can display the first n visible items with a scrollbar.The last thing to do is to add a listener to the scrollbar so as it move we can change the state properties start and end index . Changing the state will trigger an update and we will see the right rows rendering given a new scroll position.New items will be created and the not visible items will be destroyed.

This diagram shows what is happening as we scroll:

Now we can take a look at the end result. The code is super fast with almost no impact in the cpu when scrolling.