‫Let's now check out a practical example
‫of memorizing a component.
‫So here we are still in the Atomic Block project,
‫but for these next few lectures, we actually need
‫the original app.js file from the starter files.
‫So let's move there.
‫So grabbing again app.js
‫and let's paste it right here in the project folder
‫and then I'm gonna rename it to app-Memo
‫and then let's place it into the source folder.
‫Now, okay, so let's open that one up here
‫and then also in index.js, we now need to link that file.
‫So we now want to import the app from app-memo
‫and we need this component right here,
‫so the original one
‫because here we don't have any context yet
‫and instead we are passing some props around,
‫which is what we need for these next few lectures.
‫Now here in the archive, let's actually remove this prop
‫and let's just add one here called show and set it to true.
‫And then let's come down here to the archive
‫and accept that.
‫So in this lecture we will actually work
‫with this archive component.
‫Then here, let's make this show archive
‫dependent on this show prop.
‫And then we need to remove this button right here.
‫So this button was using the onAddPost function
‫that we passed in as a prop earlier,
‫but now we no longer have that prop.
‫Now, right, now we never really looked
‫at this component here in the beginning,
‫so let's just quickly understand what it does.
‫So basically it creates these 10,000 random posts
‫in the very beginning and stores them into the post state.
‫Now by default, all these 10,000 posts
‫are not actually shown
‫because we have the show archive state set to false.
‫At least that's what the incoming prop is.
‫Now here, for some reason, it is open.
‫Let's just reload that.
‫And well, maybe I set it to true up there.
‫Ah, yeah, here I want false actually,
‫so that by default that huge list of posts is not rendered.
‫So here we have some conditional rendering
‫based on that state, but as soon as I click here,
‫it'll actually open this list of posts.
‫Now let me actually increase the number here a bit
‫to 30,000, but if your computer is maybe a bit slower,
‫then you can leave it or maybe even reduce it.
‫So otherwise your computer or your browser might crash.
‫So let's see again that when I click on this button here,
‫it actually takes a long time
‫for the entire thing to render.
‫So that's probably like almost a second tier.
‫Now the problem is not that it takes a long time to render
‫this list here because that's just completely unavoidable.
‫So it's so many items that of course it'll take some time.
‫Now the problem is that this will slow down the entire page.
‫So what happens when I type something here
‫into the search bar?
‫So notice how this created a big lag.
‫So let's show again.
‫So as I type, it takes like half a second
‫until that letter actually appears there
‫and so let's now also inspect this using the profiler.
‫So let me actually reload again
‫so that the archive is closed.
‫And so then we will do a before and after.
‫So we are now profiling.
‫So now I type and it is really fast.
‫But now let's open the archive,
‫so we have a second render here or re-render
‫and then let's type something here
‫and now it is really slow
‫but just watch how slow that actually is.
‫So here again we have the three re-renders that happened
‫and by the size of the bars,
‫we can already see that this last one,
‫so the second letter was really slow.
‫So hit a first keystroke for the H right there
‫was just normal.
‫So everything took like one millisecond
‫or three milliseconds.
‫So something really, really fast.
‫But then watch how long it took to render the archive.
‫So it took 131 milliseconds
‫and that's just the rendering itself.
‫So just calling the function, then painting the whole thing
‫to the dom took even longer than that.
‫So probably like one entire second.
‫But anyway, what matters to us is here,
‫this second keystroke, so when I wrote the A there.
‫So notice here how the archive re-rendered
‫when I typed something here
‫and so the reason for that is of course that the archive
‫is a child component of the app component,
‫which is where that state actually lives.
‫And so if we update the state in the app component,
‫that will then, as we already know,
‫trigger a re-render in all the child components
‫and so that includes the archive
‫and notice how it took even so long
‫that all the other components don't even have space
‫to appear here in this flame graph.
‫But if we take a look at the ranked chart,
‫then we see all the other components.
‫And so here again, we can see how fast all of them are
‫in comparison to the archive.
‫All right, and so again, this is the real problem
‫that we have, which is the typing here now makes
‫the entire application really, really slow
‫because it always needs to re-render
‫this really slow component
‫and so this archive component is a perfect candidate
‫for memorization.
‫So let's do this now here in practice.
‫So the way we do that is to just wrap
‫the entire component function into Reacts memo function.
‫So we just call memo, which is then imported
‫from React just like use state or use effect.
‫So notice here that it simply imports memo from React.
‫So it's just another function that comes with React
‫and then we just wrap everything into that function call.
‫So basically we call memo with a component as an argument
‫and then this function will return a brand new component
‫and so then we need to store that component also somewhere
‫and so we create a variable which we call again, archive.
‫And so now our archive component is all of this here.
‫So the memorized version of the original archive
‫and here we could probably even remove the duplicate name
‫and make this an anonymous function
‫but I guess it's best like this.
‫So just leave the name here as well
‫and yeah, with this we have actually successfully memorized
‫the archive component and remember that this was
‫a great candidate for memorization
‫because the archive component is very heavy.
‫It re-renders very often and it does so with the same props.
‫So the only prop that it has is the show prop,
‫which is always false
‫and so, yeah, again, this is a great candidate
‫and so let's now do exactly the same profiling
‫that we did before in order to show
‫if it improved our situation.
‫So let's start here.
‫So that was fast because the archive is still closed.
‫Let's open that up
‫and this of course takes exactly the same time as before,
‫which makes sense because as we just learned,
‫memorizing a component has nothing to do
‫with updating state.
‫So memorizing only affects the props.
‫So that list still has to be rendered
‫and so that still takes time
‫but what should have changed is the time that it takes
‫to now re-render as we type something else here.
‫So let's try that and we can immediately see
‫that this was really fast
‫and now our profiler should prove that,
‫and indeed, now here in the second time
‫that we typed something, it is really fast again.
‫So here even the first time that there was a keystroke,
‫we can see that the archive did not render.
‫So here it is showing us that this component
‫is memorized even and so again, it did not render,
‫which is because the prop that it received
‫was still the same as before.
‫So the prop that it received is show, which is always true.
‫And so then this component didn't have to re-render
‫as the parent re-rendered.
‫And again, here the same thing when the component
‫was already opened.
‫And so with this, so with the simple memorization
‫just made our component really fast and snappy again.
‫So we can type all we want, even with that archive open
‫because it will not re-render on every keystroke
‫or also here each time that we click on this button
‫for example, which before would also be really slow
‫because clicking here also renders the app component.
‫Great, so this is why and how we memorize a component
‫in React.
‫But now let's do something that will break this memorization
‫so that I can then introduce the next lecture
‫so that we can then solve that problem in the future.
‫So let's say that now instead of passing in this prop
‫right here, I instead want to pass in an object.
‫So let's create an object here called archive options
‫and then let's say show is false.
‫And a title.
‫Let's say post archive in addition to main posts.
‫And now here instead of the show prop,
‫I'm gonna pass in that object.
‫So archive options.
‫Set it to archive options.
‫And now let's get that here.
‫And now here we use archiveoptions.show
‫and here...
‫We use archiveoptions.title.
‫Give it a save, then let's reel out here
‫and then let's run exactly the same experiment as before.
‫So just typing something here.
‫Then opening here the archive,
‫which is always take some time.
‫And now as I type notice how it'll be back
‫to taking a long time.
‫So you saw that.
‫And indeed, we are now back to basically re-rendering
‫this component even though it is memorized
‫and even though it looks as though our prop hasn't changed.
‫So the archive options that we received
‫still looks the same as before.
‫It's just this object right here.
‫But still now our archive component was re-rendered again.
‫So let's now find out why this is
‫and how we can fix that in the next lecture.