‫Let's now use the useMemo hook
‫to fix that problem that we created ourselves
‫with the archive component earlier.
‫So remember how earlier, we created this object right here
‫and then passed that as a prop into the archive component.
‫Now, the problem with this is that doing so actually breaks
‫the memoization that we created for the archive component.
‫So we saw that here in the profiler also earlier
‫where we saw that, after the archive is open,
‫then it again takes a long time for us
‫to see the results of typing here.
‫So we can also see that in action because the application
‫is really laggy and unresponsive as we type into this field.
‫So as we just learned in the previous lecture, the reason
‫for that is that this object right here is recreated over
‫and over again each time that the app component re-renders.
‫And so basically, then the prop
‫that the archive receives will always be different.
‫And so then, of course, memo doesn't do anything.
‫So what we need to do
‫is to make this object here stable over time,
‫and so that's where the useMemo hook comes into play.
‫So let's use that hook here, so useMemo,
‫which, again, needs to be imported from React.
‫So let's call that, but now it is actually not as simple
‫as just wrapping this entire object into useMemo.
‫So that's not how it works.
‫Instead, useMemo actually takes in a callback function,
‫which will be called on the initial render.
‫So very similar to the useState hook.
‫So in this case, all we need is an arrow function
‫which we want to return our object.
‫So return this object right here.
‫All right, so this callback function here is basically
‫to work that should be performed on the initial render
‫and which result should be then stored in the cache,
‫so should be stored in memory
‫so that React can remember it across re-renders.
‫Now, in this case, all we're doing
‫is to return an object here, but there could be also
‫some more intensive calculation going on,
‫which is the reason why useMemo takes in a function
‫and not just a value.
‫All right, so again, whatever we return from this function
‫will be saved in the cache.
‫And so then remember, we also need to pass in
‫the dependency array, which will basically determine
‫when this whole calculation here is executed again.
‫So just like the useEffect hook, right?
‫So by specifying an empty dependency array here, that means
‫that this value will only be computed once in the beginning
‫and will then never change, so it will never be recomputed.
‫And so this should actually already have fixed it.
‫So let's re-render here, clear that,
‫and now our archive is closed.
‫And of course, we want to profile this again.
‫So this is fast as always.
‫Then we just open this again, which takes its time,
‫and now we will see if that memoing has worked.
‫And it was really fast, so it looks like it did.
‫And indeed, the archive was not rendered in the beginning
‫and also not, as it was already opened.
‫Great, so we fixed the problem
‫and our memoized component is now back to working.
‫So we have now this stable value here over time,
‫which will simply be taken from the cache
‫as long as the dependencies don't change.
‫And speaking of the dependencies again, right now,
‫we don't have any, but actually, let's create some.
‫Or at least one.
‫So here, I now want to change the title
‫to use a stateful variable.
‫So to use the posts.
‫So now here, I want to say post archive in addition to,
‫and then the number of the main posts.
‫So that is posts.length, so it's not the filtered posts,
‫so it's not this value right here,
‫but really the amount of posts that exist.
‫And so now we need to specify that value here
‫in the dependency array because otherwise,
‫this object here will never be recomputed.
‫And so let me first show you that actually,
‫this is how it works.
‫So right now, it says here, in addition to 30 main posts.
‫So let's add another one and watch what happens.
‫So here, it now says that 31 posts were found,
‫but down here, we still say 30.
‫And so that's because React is still reading this object
‫from the cache, which it didn't update
‫because we didn't place this post variable
‫into the dependency array.
‫And so therefore, this function here was never called again.
‫And so then React is still using
‫the stale value of this post state.
‫So here we are again in the presence of stale state
‫and of a stale closure.
‫So a stale closure because this function here
‫was created initially and from there on,
‫it now remembers all the variables that are referenced
‫inside of it as they were at the time
‫that the function was created.
‫So that's what a closure is,
‫and it is a stale closure because it never run again,
‫and so it is still remembering the old values.
‫So that's one of the weird things about React,
‫which is very confusing for beginners,
‫but that's why I am talking about this time and time again
‫because this is the kind of stuff
‫that you really need in order to master React.
‫But anyway, let's now then place the entire thing here
‫into the dependency array.
‫So not just posts, but really posts.length,
‫which is a lot better because post is an object
‫and this is a primitive, so it's always best
‫to have primitives in the dependency array.
‫And we will learn more about that even later
‫in this section.
‫But anyway, you can see
‫that it actually already updated there to 31.
‫But let's change this again or test this again.
‫So 31 up there and beautiful.
‫Now it updated down here as well.
‫Now, the consequence of this is that,
‫whenever this archive is open, it will then take a long time
‫to re-render the application when we add a new post, right?
‫So let's check that.
‫And now I will just call something very short
‫so that we don't get all those re-renders in the profiler.
‫And then notice how that took some time.
‫And so indeed, we can see that here
‫in this last state update, where now the archive,
‫of course, still had to re-render because now this time,
‫our object here actually has been recreated.
‫So we edit a new post and therefore,
‫posts.length was changed, and so then this object here
‫became a new object, making it so that a prop changed
‫which, in turn, triggered the archive to be re-rendered
‫as a result, even though it is memoized.
‫Okay.
‫So hopefully, all of this made sense, and later on,
‫we will actually see another use case of the useMemo hook.
‫But for now, let's move on to the useCallback hook.