Memoize Elements

[00:00] There's really not a lot that we have to change here. We just want to say, hey, I want this React element to be the same as long as the name is unchanged. That's what we're saying. So useMemo from React, and this is what we're going to get. We depend on the name, boom, we are done.

[00:17] So now, useMemo will make sure that we always receive the same thing that we gave it the previous time, so long as the name remains unchanged, which is exactly our desired results here. So if I record, and I'm going to change the name, Cody exclamation point, and then we're going to change the color.

[00:35] So both of those trigger to re-render, we'll see that in the profile, but then incrementing the app count and the main count, that should not trigger any re-renders. Let's take a look. So footer re-rendered because the props changed, the name changed, that makes total sense. If we look at this one, the context changed,

[00:53] total sense, and then here, oh my goodness, there is a missing component in here because we didn't need to re-render, and we got the same React element that time as we did the previous time because the name was unchanged. Sweet, and then of course, the main is the only one that's re-rendering for that.

[01:12] So there you go. Another approach to preventing a re-render of a React component is by memoizing the React element that you get from it, and then just listing the props in useMemo.

[00:00] The world is messy yet again, and it's not always so simple as just consuming one context value. So we have this new feature where the footer accepts a name prop, and that name can be changed through this input. And so changing the name and changing the color should re-render the footer,

[00:17] but anything else, changing the app count or, yeah, really just changing the app count or changing the count that's inside of main should not re-render the footer. So we've just undone all the cool work that we've done so far because the footer now accepts a prop with the name. Now, you might be thinking, oh, okay, so we just make another context for the name.

[00:37] No, please don't just make context for every single thing that your component can have, unless you've tried everything else and it doesn't work. But yeah, there's another way to do this, and we're going to explore all the different approaches that we can take. So in this one, we're going to be using useMemo. What? Yeah, this is going to be interesting.

[00:58] So we're going to memoize the component so that we get the same React element every time so long as the name is unchanged. So by the time you're finished, you should be able to have it change when you change the name. You should have it re-render when you change the color,

[01:16] but it should not re-render when you increment the app count or the main count. And right now, you'll notice that it is properly re-rendering when we change the name and the color, but it's improperly re-rendering when we change the app count because the app count triggers a re-render of this UI. But there is a way with useMemo around this guy

[01:37] that will allow us to avoid that re-render when we change the app count. And that, again, is taking advantage of the element reuse feature that is built into React. And then, of course, when we are incrementing the count, that is all contained inside of the main component.

[01:56] So that's not going to bother us at all because we're composing properly and we don't have any problems there. Okay, great. So let's useMemo.

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

Memoize Elements

Transcript