Transcript

Instructor: 0:00 A common practice when you have to render a lot of items on the page is to use what's called virtualization or windowing. We're going to be using a tool called React Virtual. You may or may not have used this before, and that's mostly irrelevant.

0:14 Mostly, what I want you to get out of this exercise is the understanding that just because you have a ton of stuff that you need to display to the user doesn't mean that you actually have to render all of the stuff at the same time if it's not all actually in the visible space for the user to interact with.

0:33 For example, our list here, we're only showing about 20 of these, but we actually have 16,000 that we're rendering right now.

0:41 So far what we've done with this list is we actually are slicing out first 100, but we are now going to display all 16,000. We're still going to get an awesome performance experience. You'll notice we don't have that right now. The highlighted index is not getting updated as I'm hovering over this. That's just because it takes a lot of work to re-render 16,000 items, even with memoization.

1:08 Let's look at some of the background that I give you here to get yourself all pumped up and ready for this exercise. I'll show you how to use React Virtual, so you get an idea of how to turn a regular list into a virtual list. Feel free to explore that a little bit. You can dive into the docs a little bit, too, if you want to.

1:28 For this exercise, what we've done here if we come down here to our app. Remember we used to have all items and then items was allItems.slice. We no longer have that. We're actually taking all 16,000 items and rendering all of those. Your job is just to make sure that we do that in a way that works and is fast.

1:50 The emoji are here to hold your hand and make sure that you do everything right to combine our useCombobox with the useVirtual Hook that we get from the React Virtual. You can absolutely reference this example to get an idea of how to be successful using React Virtual.

2:08 Have fun, and we'll see you on the other side of the exercise.