Virtualizer

[00:00] Let's virtualize our list, so I'm going to create a ref our we're going to call this the parent ref and This is a UI UL list element. Let's pull in use ref from react and Then down here. Let's attach that ref to the UL right here

[00:18] So ref is that parent ref and with that now? We are Again, and yeah, we'll want to initialize that to know there we go, and now we're going to create our row virtualizer And that is going to be using use virtualizer use bird use

[00:38] Virtualizer from ten stack react virtual which is not auto importing so let's do that ourselves From and the thing we want use virtualizer there we go Okay, so we've got our virtualizer from ten stack react to virtual We want to set a couple of options here so the count to the number of items

[01:00] We're going to have is going to be how many cities there are the get scroll elements so the element that's going to be doing the scrolling is that current parent ref element and then each Element is 20 pixels tall. That's just the way we've established this

[01:16] We could use some of the arguments or the or the index of that's passed to us from the estimate size function and Access the city based on that index and maybe how long the name is or whatever Information we have we can give a better estimate, but again. This is just an estimate It's not actually what the size will be

[01:37] So that is useful for dynamic lists, but for us. They're all just 20 pixels All right, and then we'll come back to this here in just a moment We'll come down here, and we want to have this you will have the height of the entire content So we're going to add an Li here that has a style

[01:57] Set to the total size of pixels on that row virtualizer so that effectively is just going to say Let's go through how many there are Which we Specified right here, and let's get the estimate size for all of them, and that's going to be our total size so that's however many there are times 20 for us and

[02:19] now we're going to say row virtualizer get items in place of our cities and this is going to Give us a virtual item And we don't need to worry about the index here because the virtual item is going to have our index So let's get our item

[02:37] Is from burr yes, or yes cities virtual item index there you go, and if there's no item here That's unlikely to happen, but we do want to handle that case We'll just not render anything if there's no item and then we're going to pluck off the index key size and start from the virtual item and

[02:56] This city here, let's rename this from item to city there we go and Then a couple of things we're going to use the key from the virtual item We're going to use the index from the virtual item The size and start need to be passed down to our list item so that those can be used for the styling stuff so we'll add a size and

[03:18] start and Then right down here. Let's accept the size and start props and start and then size and start and And then down here we can add these CSS rules to Position absolutely and then set the height to be equal to the size

[03:41] Is a site well yeah, you could hard-code it since we're hard-coding our stuff, but we're going to do Size here and again that may not always be something you want to do it kind of depends if you've got a dynamic Virtual list maybe you just want it to size itself however it needs to be But that's going to handle that and then we're going to do a transform

[04:02] Transform come on a I assistant you can help me with this. Thank you to translate Why with the start being set to the start pixels and so react virtual? There were the virtualizer is going to give that to us and all of that Should get us in a pretty good spot for this so we're on a 6x slowdown still

[04:22] I can of course scroll through this and it looks kind of interesting. I'm going to click on this. We're going to hover over and remove and then stop and we'll see that things are way way faster if I do this on our profiler and I hover over one and I stop Then we'll see we are only Rendering one of our list items again

[04:44] And the city chooser is rendering really fast because it only is rendering like 20 years something of those Which is awesome now you might notice as you're Running the profiler, and you've got your 6x slowdown You might notice that scrolling you can kind of see where some of the elements are not rendered quite yet that like

[05:04] They'll sometimes Appear or it will be invisible and then they'll appear and that's because we're on like we're simulating a really low-end device and if that's a real concern for you, then there are options that you can give to the virtualizer to set the over scan and

[05:19] Like how many additional elements pass to the scrollable view we render so if that is a problem for you, then you could configure that but we That's typically not going to be a problem the defaults are actually pretty good most of the time Okay, great. So the other problem that we've got here is how we manage scrolling so

[05:39] Downshift to which we're using for the combo box this use combo box is coming from downshift. It has this Arrow key control, so if I scroll up here to the top and we'll be able to see what's going on here Inside of the the input if I go down and up Then it's going to move me to that item

[06:00] But once I get past the items that have already been or that are rendered then Like the thing just totally disappears And if I go up to the top and try to scroll back to the bottom because that that's the thing It won't that won't work at all. So the thing that needs to happen is when the

[06:21] When we want to scroll something into view We want to actually change down shifts behavior because now react virtual is Responsible for scrolling things into view and then when the highlight index changes we need to tell react virtual Hey, you need to scroll to this particular item. So that's what these two pieces are for. I

[06:40] Gave them to you because you're not here to learn down shift But this is definitely something that if you are working with something like this you'll have to think about like oh if I have keyboard controls that controls where the Highlights are coming from then I'm going to need to manage that and that's exactly what we're doing here So we're just telling down shift. Hey, you don't need to worry about scrolling to view

[07:01] I'm overriding your built-in behavior on how you scroll things into view I'm not going to do anything like that and Whenever the highlighted index changes Then we'll have row virtualizer be the one that scrolls to that index And so by setting this up now, I can this will totally work and if I

[07:22] Scroll down here We can start from right here. I can Also do the over like forward and backwards So if I'm at the very top and I hit up it'll take me down to the bottom All of that is working exactly as it should Exactly as you want it to and that's thanks to react virtualizer from 10 stack

[07:43] Super super cool Windowing is really impressive stuff. Definitely like take a look at how all of this ends up turning out as you're scrolling around I just think that's it's actually pretty cool. So With that we have a really really fast a scrollable list where we're reading stuff from

[08:04] The web worker and we've got our virtualizer going on here We've memoized things and now we can go to Salt Lake City and have a good time Okay, good job

[00:00] Let's take a profile of what things look like now. We're at a 6x slowdown. We're going to record And I'm just going to do one state change that and then take it off and take a look at this What the devil I thought we just optimized this this is supposed to be memoized and so everything's supposed to be super fast and everything

[00:16] Well turns out that just checking whether an element needs to be re-rendered can Be a death by a thousand cuts because we no longer are Just rendering a couple or 500 of these we are now rendering all of these cities

[00:34] Which is an outrageous amount of cities and so react even just in checking Do you need to re-render? Do you need to re-render? Do you need to render all of that? Takes a really long time and then the the browser updating and handling all those dom nodes also is going to be problematic

[00:49] so like you can take a look at this and run the profiling right there and You'll notice I don't know why that's looking funny like that, but You'll notice we are only re-rendering one thing and that's taking less than 0.1 milliseconds This is taking a hundred and thirty seven milliseconds

[01:11] Yikes, that is a lot of milliseconds for this component and it's again because the There are just so many elements that it needs to check or do you need to re-render? So what we are going to do is virtualize this list so that you don't have to render so many items We're going to be using tansec virtual. I think you're going to enjoy this. Let's get into it

In this workshop you will diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

There are always trade-offs to consider when thinking about optimization. 

You will be learning optimizaiton patterns in this workshop. 

But, more importantly you'll be learning how to measure the performance of your app, carefully consider the complexity trade-offs of optimization, and understand which optimizations apply to certain situations. 

By the end of this workshop you'll understand how to: 

- Prevent unnecessary re-renders
- Render concurrently
- Lazy and eager load components
- Use memoization and web workers
- and use windowing with react-virtual


## Element Optimization

Gain practical experience optimizing React component rendering. 

Learn to hoist React elements to prevent unnecessary renders, pass elements as props, use React's Context API to trigger re-renders only on necessary state changes, and apply useMemo and React.memo.

## Optimize Context 

Here you'll learn three ways to optimize context: Memoize context values, create a provider component, and split context values into setter functions. 

In addition to the techniques, this will teach you how to use the devtools to determine which ones you need to use. 

## Concurrent Rendering

Sometimes, you're rendering so many components or those components are doing such complex things that you can't afford to render them all quickly enough.

Find out how to use the useDeferredValue hook and memo to prioritize the rendering of some parts of your app over others.

## Code Splitting

Code splitting acts on the principle that loading less code will speed up your app. There are three ways we'll approach it in this section:

Lazy loading, eager loading, and transitions. 

In lazy loading you'll learn how to use React's lazy method for lazy loading components

Eager loading is like a layer on top of lazy loading. You'll learn how to deferr the loading of a component until some event occurs like a mouse over or on focus. 

In transitions you'll learn to optimize the loading experience using the useTransition hook and the useSpinDelay hook from the spin-delay package.

## Expensive Calculations

JavaScript is single-threaded which poses a problem when you need to deal with some kind of expensive calculation. 

React has ways of dealing with this but if you are outside of React-land you'll be blocking the thread while the calculation is being performed. Luckily there are a couple options for dealing with this.

**useMemo** is useful if you're working with indempotent functions. And if you aren't, **Web Workers** let you perform the calculations on a separate thread but they add some complexity  to your code.

Throughout this workshop you'll be learning to measure performance and weigh the trade-offs of all the techniques you learn!

## Optimize Rendering

React is pretty smart about determining when it needs to re-render. But, sometimes there are cases we can get a bit of an edge over it ourselves. 

If your components are re-rendering when a DOM update isn't actually needed, you'll want to reach for memo and memoize your components. 

But, what if memo's built-in comparitor isn't doing the trick? It works off a simple Object.is. Which is great most of the time but if you're dealing with complex props you have the option of passing a custom comparitor function. 

## Windowing

And lastly you'll be exploring an advanced technique for when you're dealing with a truly massive amount of elements. 

There's only so much optimizing you can do when you need to rendering thousands of elements. But, what if you only had to render a slice of them? That's where windowing comes in. 

You'll be using the @tanstack/react-virtual library to virtualize only the visible DOM nodes (and a few nodes outside of view for the fast-scrollers) in a large scrollable element.

Diagnose, profile, and fix performance problems in your React application using the Browser Profiler, React DevTools Profiler, and optimization techniques.

React Performance

React Performance

Transcript

Virtualizer

Transcript