Component Memoization

[00:00] This really isn't a lot of code changes, but I want you to spend time in the development tools. So let's change the code and we'll explore what things look like in the DevTools. So I'm going to get my list item, and that's coming from memo, which we're going to pull from React, and close that up here. Let's see what happens just with that change,

[00:19] that one change by itself, how does that impact our performance? So I'm still on a 6x slowdown, I hit record, come over here, hit force re-render, and we stop, and holy smokes, that actually made a big impact. Before it was all red and now it's not. But you'll notice it's not totally short,

[00:38] like here we're getting 21 milliseconds, our budget is 16, and so it's still not quite super awesome, but it is certainly a lot better. I think largely the reason it's not quite super awesome, is because we still have 500 elements that we're rendering here and every one of them is going to have to

[00:58] compare all of the props to see, did this one change, did that one change, did that one change, that one change. So this isn't going to just magically make everything faster, it does have a cost, but it is going to definitely make this particular experience quite a bit

[01:14] faster for this unnecessary re-render situation. We can of course take a look at the profiler, hit record on this, force re-render, stop recording, and look at that. Yeah, just one component re-rendered, the city chooser, all of the list items under the city chooser didn't need to re-render.

[01:32] So we accomplished our task, but we're definitely not done, so let's get into the next one.

[00:00] Let's optimize this component further. If I slow us down to 6x and I start recording, then I click force re-render, and then stop. We'll just assume like the parent re-rendered, something happened. Then we get a bunch of red right here, and that's not great. And the reason that's happening is because we end up rendering

[00:17] a ton of components right down here. Yeah, there we go, list item. You're going to get a bunch of those. If we open up the profiler, so now that we've established, oh, there's a problem, we open up the profiler now, and I click on force re-render, then we'll be able to see what React sees as re-rendering.

[00:35] And looking at the flame graph, you'll see this, but it doesn't actually show all of them, which is why I typically look at the ranked view. And yeah, holy smokes, there's a lot. So yeah, this is not great. Even though the individual components are not taking a long time,

[00:52] it's just that there's so many of them. We want to eventually render all of the city results. Right now we're just slicing for the first 500, but we've got users who want to scroll forever, and so we want to render all of them. And yeah, this will not work if we do things that way.

[01:10] So what we're going to do is optimize our list item component using memo. So let's give that a try and see how that impacts the performance of what happens when we click force re-render.

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

Component Memoization

Transcript