Virtualize Long Lists of Data in React

Instructor: [0:01] If you're working with a React application that renders a lot of lists of data, not 10 or 20, more like hundreds, or even thousands of rows, there's a technique called windowing. Windowing is a technique where you only render a small subset of your rows at any given time, which can dramatically reduce the time it takes to render the components, as well as the number of DOM nodes created.

[0:26] For example, here I have reviews, and I have just four reviews from four made-up people here. Now, with this Dashboard page the size that it is, it only has a couple of rows on this guy, and then these only four, you can see that the page loads quite quickly.

[0:40] However, let's go ahead and update this Reviews table here to add a lot more reviews, and see how it affects our performance. Inside of my Dashboard component here, down here at the bottom, is a NewsCard component, that takes a feed or a list of reviews to print to the page.

[0:56] That's what this mock feed is, it's just some dummy data on some made-up users that I've put together for the reviews. Then I've also created this function called Duplicate Items, which is going to basically just take a array of objects and recreate them to a number of repetitions that I would like.

[1:16] Right now, I'm just working off of one repetition. It's just the initial four. Though if I change this to a hundred and refresh the page, you'll notice that the re-rendering of this does take a little bit more time.

[1:30] It does spin a little bit longer than before, as I go all the way up to a thousand duplicated items. We're up to 4,000 items. You'll notice that I sit in a spinning state. I'm actually scrolling up and down and it's locked my screen. It's very janky and jittery.

[1:49] This is obviously a terrible experience for your users. As you can see, we're in a constant loading state. Even scrolling up and down is a little janky. You might be thinking, I don't work with that many rows, so I'm probably OK.

[2:01] Well, even if you're working with a hundred rows, which isn't as crazy, you're still going to see some jankiness in the browser as you switch between states. For example, loading states, arrow states.

[2:12] If your rows can sort, and you want to rearrange all of them completely, even at a hundred rows you're going to see some jankiness in the browser, some degraded performance. A good package to add that will help us with this windowing technique is going to be react-window.

[2:29] Go ahead and install that into your application if you haven't already or if it's not in your package JSON. Then rerun your server. Now back inside of our code, let's rework the Reviews table that we had down on the bottom to use react-window to virtualize that list.

[2:50] It's not re-rendering the entire thing on that page load. Back in the code, let's go to this NewsCard component. We're going to, at the top, import fixed size list from react-window. Then now using this fixed size list, let's go ahead and make a example component that we can work with.

[3:11] Here you can see we have that fixed size list. You can give it a couple of props that give it the information it needs. I'm saying just give it a fixed height of 350 pixels. Let's say that my item count is 4,000. We'll double check. We have 1,000. It's duplicated 1,000 times.

[3:27] There's four in there. We're going to have 4,000 items. The item size is 35, that's the height of it. The width I want to say, let's just span the entire page 100 percent. Then for the actual data that I'm going to feed it, it's going to come through the feed prop and provide it here.

[3:47] As you can imagine, you can work with data from an API here. You can work with any kind of state management library you want. You just got to feed it into this fixed size list as you see here. Let's go ahead and create this row. I'll do it just above it.

[4:00] This is the child component of the example here. This row is going to have an index and a style given to it as the child. Then I'm going to just copy everything that's inside this map here that's already being done.

[4:12] I'm going to pull out just this list item and throw it into the return of the row component. Then as you notice that it's mapping over feed and getting item outs, that's not how this is going to work. We need to make a quick little adjustment to this.

[4:26] Actually, I'm also going to just comment out this code so it doesn't slow us down and add our example component here. Again, we need to change the way it's referencing item here.

[4:37] All I'm going to do is reference them all and then do feed which is the prop to the NewsCard component at index that's going to do the exact same thing. Then I'm going to pass these style prop which comes from react-window that helps it style it correctly so you can scroll and you don't see any flashes.

[4:54] Again, this is a child component of fixed size list. When I reload this page, watch how quickly it reloads. Even though I'm reloading 4,000 items, the reload happens almost instantly. If you can remember before, it locked up the screen and was difficult.

[5:12] Looks like I have some styling stuff. I'm going to make the item size 60, which more closely resembles what it looks like. Again, because we're using react-window, we're windowing the components to get rendered here to the user. When you refresh the page, you can see that the performance is night and day, versus rendering those 4,000 items earlier. It was, basically, locking up my Chrome browser.

[5:40] Now, again, there's a lot of functionality you can do with react-window. I'm just showing you the basic of rendering some static data. You can lazy load, you can fix items, you can do a grid, you can scroll on in a column format instead of a row. There's a lot more information and links to react-window are found below so you can take this further.