Memoize Components

[00:00] All right, our footer is just being used right in line here. And so as it stands right now, anytime this app count is updated, then our footer is going to get re-rendered because it's going to create a new React element and React's like, well, that's a different one from the one I had before. Let me call the footer to make sure that the UI didn't change.

[00:18] We want to prevent calls to the footer. And so we're going to memoize the footer component itself. And then anywhere it's used, it will be memoized in such a way that React will just have to compare, okay, the inputs are the same, so I don't need to worry about re-rendering this. So let's take our footer is memo.

[00:38] That's going to come from React. And we'll just wrap it up like this. Dun, dun, dun, dun. And now it's been memoized. So if we save this, we hit the record button, and we just make sure that all of these are re-rendering properly, and that one should not, and that should not re-render. So we'll take out the first two.

[00:58] We visually saw that it is re-rendering, so re-rendered when the props changed, re-rendered because context changed, and here it didn't re-render at all, and there it also didn't re-render at all. So one thing that's not showing up in this profile is React actually performing the comparison every single time the footer is rendered.

[01:16] And so that's probably not going to be, well, certainly it's not going to be a problem in this situation. Maybe if you had like tens of thousands of these, having React go through every single one and comparing before and after could potentially be less optimal, and we'll actually explore that a little bit more

[01:36] in a future exercise. But yeah, this works out pretty nicely. But that's one reason why you might, like some of you might be thinking, well, okay, so why don't I no longer accept the footer, and we go back to accepting a name, and name string, and then render the footer right here.

[01:56] Name, name, right? That would be like a little bit more standard React, I would say. Most people would probably do this more naturally. And yeah, you could totally do that, and you'll still wind up with the same proper scenario where the footer's not going to re-render for either one of those cases.

[02:14] So no footer re-render there, no footer re-render here, because the footer's memoized, and it doesn't depend on those counts. The one difference between what we have now and what we had before is that before, React just had to compare, oh, the footer React element before is the same as the footer React element now.

[02:34] And so that's triple equal, so we're all good. However, if we do things this way, now React has to go through every prop that the footer has and compare those individually. And that's, again, just a single prop, but if you had a bunch of props, maybe if you had many, many of these,

[02:53] then it could be a problem. But I would venture to say that there's not a scenario in the world where this is going to be preferable over the composition approach from a performance standpoint, as provided the footer is memoized, and vice versa.

[03:12] I think they're both gonna be just as performant with the footer being memoized. But again, all of this doesn't even matter unless you actually measure and identify that you have a real-world problem on your hands. And it's only once you've identified, I've got a real problem, that you should start looking into

[03:32] all of the different things that we've done in this series of exercise steps. Because you really probably, like the vast majority of the time, you don't need to memoize your components, you don't need to extract them, whatever. But there are some really complicated UIs

[03:52] and also use cases with really low-end devices and stuff like that where it does make sense. I just want you to learn how to use the tools to measure properly, to identify whether there's actually a problem. And the tool that we've learned right here, this will help you identify if you have successfully avoided unnecessary re-renders,

[04:12] but that's not going to tell you whether the performance is necessarily great or not great. And that's what we're going to be doing in future exercises, is looking at the performance tab and learning how to throttle our CPU and all of that stuff. But this hopefully gave you an idea

[04:31] of the various mechanisms that you can use to cause React to not re-render a component if you need to reduce how many times that thing is re-rendered. Typically, I would probably go with this memo implementation

[04:47] for most of the time when I need to reduce re-renders. Context is also a reasonable solution to this problem. And even hoisting a React element or reusing it in the way that we extract it outside of a component. All of these are perfectly great solutions,

[05:05] and now you know them all. Most developers who are working with React just learn about memo and then they throw memo all over the place and they don't know what's going on. Maybe I shouldn't say it that way, but a lot of people don't really know what's going on with memo. But now you do, and I think that is a really valuable thing. And we're actually not done with memo.

[05:24] So let's continue in the workshop. We can explore more of this stuff. You definitely are going to need that so that you can make your React applications as fast as you possibly can. So good job.

[00:00] So memoizing components is actually so common that React has a built-in mechanism for this. So rather than having a use memo here, we want to just render the footer directly, that JSX element directly inline into that main footer prop. But we want to also make sure that the footer

[00:19] doesn't re-render unnecessarily when the app count is changed. So we're not going to be using use memo, instead we're going to be using memo from React. And what memo will do is effectively what we were doing with use memo, where it's going to take all of the props and treat those as dependencies. And if those dependencies don't change,

[00:38] then our React element doesn't re-render. So that's what we're going to be doing in this exercise. We'll be using memo, not use memo, just memo from React around our footer component so that we avoid the re-render. So when you're all finished, we should not get a re-render

[00:56] when incrementing the app count or the main count, but we will get a re-render when we change the color and the footer name. So give that a whirl.

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 Components

Transcript