00:00 Sometimes you have so many DOM nodes that React has a hard time keeping up and even the browser has a hard time keeping up. So if you've got a list of like 700,000 items that the user can scroll through, or maybe it's a grid, a table,

00:15 it can just be an outrageous amount of things that the computer has to process to render any updates to the UI. And so in situations like this, we have to make trade-offs, and TanStack Virtual is one that allows us to make a trade-off

00:32 and follow a pattern called windowing. Of course, TanStack Virtual is not the only implementation of this feature, but it is a great one, and I definitely appreciate it myself. And there's a React edition of this that this is the demo for.

00:49 Here you can see we've got just a ton of rows. Let's see how many we've got at the bottom. Yeah, so it looks like we've got 10,000 rows of items in here. You also have your columns. We've got 10,000 columns, and then you have your grid that kind of goes in both directions.

01:06 If we go all the way down and all the way over, that's a lot of DOM nodes, right? That's 10,000 by 10,000. That's many DOM nodes. So how is it still so fast? How is the browser able to manage this without breaking a sweat?

01:22 Well, the answer is actually kind of simple and also amazing. The way that this happens is you simply have your scrollable list. There's your div, and you set its height to be the height of what it would be if all of the elements were rendered,

01:40 and then you only render some of them and set their position, absolutely positioned, to where they would be if all of the elements were rendered relative to where the scroll position is currently. So as far as the user is concerned, it looks like we've got all of the items,

01:58 but you'll see the translate Y and all of these is changing because we're seeing these different rows that are in a different spot. And so we have just a bunch of virtual items that are above, virtual items below, and then maybe like 20 real items that are actually visible.

02:15 They go a little bit above where the scroll position is. You can see it right up there. And then they go also a little bit below where the scroll position is as well. So that way, if you scroll really fast, we've already got something there and we'll have time to render the new ones.

02:32 So you'll never over-scan or over-scroll where things are at. It's pretty cool and it's kind of clever. Definitely something that you want to use a library for because it exists. You don't want to have to write it yourself because it is complicated stuff.

02:48 It's not terribly complicated. You could probably figure it out if you were to dive into the problem space. But I like using a library for it. And there's something that you should know about it, though, is because those elements aren't in the DOM, then Command-F isn't going to work for it.

03:04 So the find feature of the browser is not going to work for anything that's not on the page. So you'll see I have this one selected. If I scroll that out of view and I try again, I'm not going to find it. And so that is one trade-off is because it's no longer in the DOM. It doesn't technically actually exist.

03:21 But it solves the problem well enough. And often when there's a situation like this where people want to be able to find an item in there, they will typically have a search of some kind, right? So that is the typical solution for that particular problem.

03:40 So the way that it looks as far as how you're using it, you would have your list of data. You've got your UL that has a set height, so it can be whatever, you know, so it can be scrollable. And then you'll have your items inside of that that are all the items that you've got. You decided, oh, we're rendering way too many of these.

03:59 We want to virtualize this. What you do is you create a ref and you assign that to the UL. You create a virtualizer from tansdeq virtualize. We've got our row virtualizer here. We set a couple of parameters.

04:15 The estimate size is actually really useful for if you have dynamic sizes. There are a couple of examples in the docs here for how to deal with dynamic sizing. And then here's the element that is responsible for handling scrolling. And then what I like to do, there are a couple of ways to do this,

04:32 but what I like to do is I'll have my UL have its set height and I set its position to relative. And then I'll put an LI in there that doesn't have any content, but it does have a size. So that will force the height of the UL to match that size. And then I iterate over all of the virtual items.

04:51 I grab the bits of information that I need from that and I render the UI that I need for it. And the only thing that you need to worry about is making sure that you set position, top left, width, height, will be dynamic based on the size of the virtual item.

05:09 And then do translate Y at the start. Now the height could be, if you're doing dynamic sizing, then the height may not need to be quite specified here like this. But yeah, often if you're doing like fixed height, then yeah, I typically like to set that height.

05:26 But yeah, the most important piece here is this transform to translate Y to wherever this element is supposed to start. And that is what will keep it in the right position as we're scrolling through this set of components. I think it's super cool.

05:45 And I think that you're really going to enjoy working on this exercise to enable our list to be as fast as possible. So let's get into it.