Create an Auto Resizing Virtualized List with react-virtualized

[00:01] React-virtualized allows you to render thousands, or even millions of items using a technique called windowing. This means that instead of rendering all million items into the DOM, it will only render what can fit on the screen.

[00:14] Our current application has an index that pulls in a generate data function. Our generate data function just receives a count, and loops over and uses Faker to generate some fake data.

[00:25] If we go back to our index, we default it to a thousand, but this could be anything from a thousand to a million, and react-virtualized will handle it just fine.

[00:34] One other thing to note is that in our index.html, we have a root that this is where we're rendering to, and in our index.css, we're saying that this root is 100 VH, which is a viewport pixel, which just means that it will take up the entire screen that we're looking at.

[00:51] Now let's switch back to our app, and we'll get started on adding a list. First thing we'll do is change this div to AutoSizer. We'll open it up, re-close it, and add a child as a function. This function as a child will receive width and height.

[01:12] What this will do is automatically re-render this child, which is just a function, with a new width and height whenever anything happens, AKA a resize or whatever. We can prove that by returning a span here, and we'll say width is width pixels, and then we'll just say the height is height pixels.

[01:35] We close that, and we'll go to our browser. When it refreshes, we can see that the width is rendering here and the height, and whenever we adjust anything, it will re-render. Even on the width, when we adjust that, it'll re-render.

[01:49] Rather than just returning a span here, we'll return our list. List is imported from react-virtualized here, and it takes two properties. Width, which we're getting here, width, and the height.

[02:02] We'll also add a few other pieces of information. One will be the row count. This will be equal to the amount of rows that we have, so this.props.data.length, and that just refers to the thousand items that we're generating here and passing in as our data prop.

[02:23] We'll also need to select a row height. The row height is the height of each particular row, and we'll just say it's 50 pixels, and then we'll need to add a row renderer. We'll just say this.renderRow.

[02:35] This row renderer will be the function that gets called with some pieces of information to render each particular row, so we need to set it up. Let's say renderRow is equal to a function here, and it will receive an object of various pieces of information, including the index, isScrolling, key, and style.

[03:02] The two pieces of information that are most important are the key and the style. Here we'll return a div, and we need to apply the key here, and the style. The style is an automatically generated style that will absolutely position this particular row on the screen appropriately.

[03:22] Also, to access the piece of information we'll add a div here, and then this.props.data. We have the index of the data, so we'll say index, and then .name. We'll also add the email on the screen, as well.

[03:37] The key is going to be an identifier for React to tell it that this particular component that's being returned is the exact same across scrolls. This will help with performance, and the style, we'll take a look at here in the DOM.

[03:57] You can see now we have our entire list re-rendering inside of our div, and a react-virtualized content, and then another react-virtualized div that's a calculated height, and then these are each of our divs. As you can see, our style property is applying the height of 50, left of zero, and then adjusting the tops.

[04:20] As we scroll, we can see that our styles are being changed and things are being re-rendered as we scroll. However, only a certain number are in the DOM. There's not all 1,000 being rendered.