Current section: Element Optimization 33 exercises
solution

Reusing Elements

Loading solution

Transcript

00:00 So we're going to take this footer and we're going to extract it in the module scope, extract to constant in module scope. We'll call this footer. And we're done. Our editor can do that for us pretty easily. Save this. We get a reload. We're going to trigger a measurement here.

00:19 Click on that and stop the profiling. And would you look at that? Only the app re-rendered. We didn't get a render of the footer. In fact, the only time the footer will ever show up in here is on the initial render of our application. So I would have to do this, which will trigger a

00:36 full page reload and start the profile right away. And now I'll see that the footer renders this time. But if I do that again and we get that, and then I increment this once, then we'll actually get the full thing. So we get the first render that includes the footer. And then the second render

00:53 does not include the footer. So there you go. Success. But again, just want to emphasize this is so fast that you wouldn't want to bother with this optimization. But if you're building like a big data table or something like that, that's got lots of different components and stuff,

01:11 then yeah, this type of optimization could be really useful.