Element Props

[00:00] The secret for performance improvement here is actually composition. This is one of the patterns that we learn about in the advanced React patterns workshop, where instead of having main accept the color and forwarding that color along to the footer, we actually accept the footer UI.

[00:16] Now, how does this improve things so that the footer doesn't re-render when the count is changed? Well, what it does is it takes the footer out of the main component, so creating that element happens inside of the app. And so, when the count re-renders, that footer prop doesn't actually change.

[00:35] Let's do it, and then maybe this will make a little bit more sense what we're doing here. So we're going to cut that and put footer right in here. Then we're going to remove color and say footer, and that footer is a React node. And we'll get rid of that, we'll get rid of this, just to keep track of where we're at.

[00:53] And then right here, instead of passing color, we'll pass the footer. And that takes care of it right there. So now, we create this footer UI, pass it to main, and main can re-render as many times as it likes. It's not going to change the footer UI.

[01:09] The footer UI will remain the same across these renders of the count, because when you increment the count, we're not going to go up to the top of the React tree and re-render the whole thing. So we're not creating a new footer JSX element here. We're going to just React will have the same one it had last time.

[01:28] The props are unchanged. And so for that reason, incrementing the count should not affect the footer. So let's try that out. We're going to hit record. We're going to increment the count, and then we'll change the color. And it looks like it's all still operating the way it should. On that first count increment, we only changed the main. We only re-rendered main.

[01:48] And then when we changed the color, we re-rendered everything, because our state is managed up here, and main is getting re-rendered. As a result of that, it's getting a new footer UI anyway, so it does need to re-render for that reason. And then that footer also is going to be different,

[02:03] because that React element was recreated as well. And of course, the color changed, so it did need to be rendered again. So there you go. That composition actually does improve performance, because it eliminates unnecessary re-renders.

[02:20] When a component is rendered by a parent and has some state change in that parent, and it doesn't care about that state, yeah, by composing, you can make it faster.

[00:00] So it was easier before when the footer didn't actually accept any props or anything like that But now the footer will actually change when you change the color and it shouldn't re-render when the counter is clicked So we have to move things back into our render

[00:14] But is there something that we can do to make it so that the footer doesn't re-render when the counter is clicked and it does When you change the color so re-render only in one situation not the other and right now we have it re-rendering in both situations Which is not desirable I want to make it so that when I increment the count it doesn't re-render when I change the color it does

[00:35] That is your objective in this exercise. I think that you're gonna have a good time

React Performance

React Fundamentals

React Hooks

Advanced React APIs

React Suspense

Advanced React Patterns

React Server Components

Epic React Pro

React Performance Intro

Intro to Element Optimization

Reusing Elements

Context

Memoize Elements

Memoize Components

Dad Joke Break Element Optimization

Element Optimization

Intro to Optimize Context

Memoize Context

Provider Component

Split Context

Dad Joke Break Optimize Context

Optimize Context

Concurrent Rendering Intro

useDeferredValue + memo

Dad Joke Break Concurrent Rendering

Concurrent Rendering

Intro to Code Splitting

lazy

Eager Loading

Transitions

Dad Joke Break Code Splitting

Code Splitting

Intro to Expensive Calculations

useMemo

Web Worker

Async Results

Dad Joke Break Expensive Calculations

Expensive Calculations

Intro to Optimize Rendering

Component Memoization

Custom Comparator

Primitives

Dad Joke Break Optimize Rendering

Optimize Rendering

Intro to Windowing

Virtualizer

Dad Joke Break Windowing

Windowing

Outro to React Performance

React Performance

React Performance

Transcript

Element Props

Transcript