Primitives

[00:00] Not a ton of changes happening here. Conceptually, what's happening is, well, first of all, let's get rid of this custom comparator. We are not going to need this when we're done. What we're going to do is take this computation right here. We're going to move it right up here to our list item. And we're going to compute the isSelected

[00:19] and isHighlighted right up here. We were actually already computing that below in our custom comparator. So we're not computing this any more than we were before. We're just computing it in a different place. And so here, we're going to get our selected city. The ID equal our city. The highlighted index is whether that's equal to our index.

[00:37] And now, instead of a selected city, we can call this isSelected. And we'll call this isHighlighted. And with that, we can then come here and say

[00:52] isSelected and isHighlighted. And we swap these out for isSelected and isHighlighted. Boom. And then that's it. Yeah, we're done. So let's just double check that this actually worked

[01:08] and didn't regress our performance. So we're at a 6x slowdown. We'll record it, test that out. And yep, that's looking awesome. And then we can come over here to our profiler. And we'll record that. Make sure that the right number of components are re-rendering as a result of this change.

[01:27] And they totally are. We are doing super awesome. You should feel super great, because we drastically simplified our code without negatively impacting performance. This is a PR merged. Good job.

[00:00] Custom comparators are fun and all, but it would be great if we could make it so we don't need a custom comparator. And if you change the way that you have your component accepting props, then you can do that by changing to only accept primitive values. And then the default memoization can take hold.

[00:17] So, if you recall our avatar example, we're comparing the avatar URL and the name and whether those changed, and that determines whether our UI is going to update. But, you know, the built-in memoization comparator is just going to compare the props. Are they triple equal?

[00:37] And so, if instead of accepting a user that could have various things on it change, or the object itself could change, if instead of that, we actually make our memo, or our memoized component, accept primitive values,

[00:53] then the built-in comparator that memo does will work for this. And so here we have our avatar URL and our name, and now we don't need to worry about whether other properties of the users changed or anything like that. It's just these properties are the ones we depend on.

[01:09] These are the primitives, and you go ahead and do your own comparison there. And if you need to have some other thing, like their face, I don't know. Yeah, sure. Thanks, AI assistant. Then that also can be another primitive value.

[01:27] We don't have to worry about breaking memoization, and everything will work much nicer. So, in this exercise, we're going to be doing that to improve the performance of our memoization, or rather preserve the performance of our memoization,

[01:44] while also making the code a lot, lot simpler. So, 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

Primitives

Transcript