Eager Loading

[00:00] All right, here's our loadGlobe function that we passed to Lazy. Now, we could call this loadGlobe function anytime we like, and it makes sense to call it onFocus. So, onFocus, loadGlobe. Yep, and onPointer, enter.

[00:17] Oh, not cancel, but enter. There we go, loadGlobe. So, once the pointer is entered, or once the focus has been received on the checkbox, then we can load the globe. So, with an empty cache and a slow 3G, I'm going to hover over it,

[00:35] and you'll notice that we already started loading the globe code. So, by the time I get around to actually clicking on it, most of that module code is already ready, and my loading is not going to take nearly as long because we already started loading that UI. Now, hopefully, your user isn't on such a slow network that it's even that slow,

[00:53] but at least we can start loading the globe a lot faster. Lots of users are not going to be hanging around the checkbox for quite that long either. This is just a little bit of a faster user experience for people as they're navigating around your application. So, just a little bit of eager loading there.

[00:00] One thing that I'm not super jazzed about is if I'm on a slow 3G network, and this is the first time I've ever loaded this before. So here, let's let's speed this up. We'll do a full page refresh with no cache and everything. And then we close this out. Slow 3G network. If I show the globe, I'm like sitting here. I'm ready to show the globe. Awesome. Boom.

[00:19] I click it. It's kind of annoying, right, to have to wait that long. Like it would. This is one of the things we traded off by having the full app load faster is that now our interactions are going to load slower. That's kind of that doesn't sit well with me. I would like these things to load, you know, faster. Just make everything faster.

[00:38] And so what we could do is we could just say, hey, if the pointer has entered this checkbox or if this checkbox has received focus, then go ahead and start loading the globe. And the cool thing is that it doesn't matter how many times you call that dynamic import, you call it once and then the module is going to get retrieved. And if you call it again, the browser is going to be like, oh, this is already in my cache and it's fine.

[00:59] It's not going to trigger another network request or anything. The browser is pretty good at handling those. And so we could actually just eagerly load this globe by calling that dynamic import. And if we do that, then on focus and on pointer enter, then maybe the global load, at least a little bit faster. Even if they're really fast, it's going to be like 200 milliseconds

[01:20] or even more that will be faster. And, you know, that that does make an impact. So why don't you do that?

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

Eager Loading

Transcript