‫After useMemo,
‫now it's time to quickly also use useCallback.
‫And as we already know,
‫the goal of the useCallback hook is to memorize functions.
‫And so, to test this, let's now paste in a function again
‫into the archive component.
‫Let's now bring back the onAddPost prop
‫that we had here initially, but that we removed.
‫OnAddPost should be handleAddPost, like this.
‫And then, let's grab this prop and receive that here
‫in our memorized archive component,
‫and then we can reactivate this button right here.
‫And so then, if we reload this
‫until it's clear,
‫so now we get this button here that we can click
‫and that will then, as you see here, edit to this list.
‫And so now, we have 31 posts
‫and if we add another one, then we have 32 and so on.
‫That's the goal of that function.
‫Now, the problem with that is
‫is that now we are back to having the same issue as before.
‫Let's, again, well first, let's close this actually
‫so that we have DB four and after.
‫And actually let's this time test with this button here.
‫This fake dark mode button also changes state
‫on the app component.
‫And so, it will also re-render the archive.
‫Let's click that, then let's open the list,
‫and then, let's set the state again.
‫And so, maybe you saw that it took a long time.
‫And yeah, so we are back again
‫to having our memorized component re-render even though,
‫well, even though it is memorized.
‫We had the same problem earlier in the previous lecture...
‫because of this prop here, which is an object,
‫but we solved that by memorizing it using useMemo.
‫And so now, we have the same problem but with a function.
‫Now, this function here is causing us the same problem,
‫and the solution is the same.
‫The solution is also to now memorize this function.
‫And so, let's do that by using the useCallback hook.
‫Make sure that it gets imported from React.
‫And then here, again, the dependency array, which is empty.
‫And so, this will then return the memorized function,
‫which we can then store into a regular const variable.
‫Now okay, and that's actually it.
‫You see that useMemo and useCallback are pretty similar,
‫but the difference is that useCallback
‫will not immediately call this function,
‫but will instead simply memorize this function,
‫while here, useMemo will basically simply
‫memorize the result of calling this callback.
‫That's the main difference.
‫UseMemo just stores a result, so like a value,
‫which is the result of this callback,
‫while here, in useCallback, only the function itself
‫is actually memorized now.
‫All right, and so, this should already be enough
‫to solve our problem.
‫Let's clear that.
‫Let's do exactly the same thing again.
‫This was fast.
‫And let's see,
‫and this also seemed pretty fast
‫and our profiler confirms that result.
‫We are back to not re-rendering the archive component.
‫Memorization is back to working indeed.
‫And we also noticed a very noticeable difference
‫in the speed and snappiness of our application.
‫Now, some teams, for some reason,
‫choose to wrap each and every function and value
‫into a useCallback or a useMemo,
‫but that actually makes very little sense
‫and it might even do more harm than good
‫in most of these cases.
‫Using one of these functions here, like useCallback,
‫actually has a cost as well.
‫React needs to run this function
‫and needs to store the function in memory.
‫And so, that only makes sense
‫if we actually see some improvement here in our application.
‫For example, this component right here,
‫there's no need to wrap it into a useCallback
‫because this is not creating any problems for us
‫anywhere in the application.
‫And so, it's best to just find some slow components
‫that do actually have a visible bad performance
‫and then using the tools that we just learned about
‫to only optimize those.
‫Okay?
‫But we already talked about that before
‫when I first introduced these two hooks
‫where I showed you the three big use cases
‫of these two hooks.
‫Now, one thing that I wanted to mention,
‫which I didn't mention in that lecture,
‫is that in the future, the need to doing any of this stuff,
‫like any of the memorization,
‫might actually disappear completely
‫because the React team is currently researching a compiler
‫that would basically automatically memorize all the values
‫that need memorization behind the scenes.
‫But still, even with that on the horizon,
‫it is still very good to know about all of this stuff,
‫first, because that compiler might actually never happen,
‫and second, because you will still see
‫these hooks here all the time in a bit older code bases,
‫so you should definitely know about how this works,
‫and, of course, also know how to use the profiler
‫to find some low performing components,
‫and also all the other techniques
‫that we're gonna talk about throughout this section.
‫And finally, I want to just quickly finish
‫with a small experiment.
‫Let's paste in another function into our archive component,
‫but this time, a special one.
‫Let's say here, this setIsDark function,
‫and I say special because this is the function
‫that is returned from use state.
‫And so, let's paste that as a prop just to see what happens.
‫Already paste that.
‫SetIsFakeDark...
‫and just like this.
‫We are, again, now pasting a callback function here
‫as a prop, which we did not memorize.
‫Let's see if that will then again slow down our component.
‫Let's record.
‫Let's do it once.
‫And so, the fast version, and again,
‫but it did seem pretty fast.
‫Maybe you noticed that as well.
‫And we see that actually the archive did not re-render,
‫so the memorization is indeed still working,
‫so even though we did not memorize setIsFakeDark.
‫Why do you think that is?
‫Well, basically React guarantees that the setter functions
‫of the use state hook always have a stable identity,
‫which means that they will not change on renders.
‫We can basically think of these state setter functions
‫as being automatically memorized.
‫And in fact, this is also the reason
‫why it's completely okay to omit them
‫from the dependency array of all these hooks,
‫so from useEffect, useCallback, and useMemo.
‫In fact, we do have a state setter function right here.
‫We are using a function here inside this useCallback,
‫but still, React, or ESLint, is not complaining
‫that we're not using that function
‫here in the dependency array,
‫while if we were, for example, to use,
‫for example, just the posts,
‫then here, React would complain.
‫Here, we would then have to place the posts
‫inside the dependency array
‫so that whenever the posts change,
‫React could then update the function here in the cache,
‫so it could basically cache the new version
‫of this function with these new variables.
‫But again, with the state setter functions,
‫that's not necessary.
‫And that's true for all the dependency arrays
‫and all the three hooks that have them.
‫Now okay, now that's actually all I had to tell you
‫about these three important tools.
‫Memo, useMemo, and useCallback.
‫Now, as I mentioned earlier,
‫you're not going to use these tools all the time
‫when you work with your own React applications,
‫but you still need to have them in your toolbox.
‫And I know that they are really quite confusing
‫in the beginning, so it took me actually a long time
‫to understand when I should use each of them,
‫but that's why I tried to give you these demonstrations
‫to show you the use cases in the theory lecture,
‫and then all you can do now
‫is to really practice these functions
‫maybe in your own examples, or yeah, in the future,
‫in your own applications as well, as the need arises.
‫Okay?
‫And actually, next up,
‫we will use some of these tools a bit more
‫to optimize context.