Nicely done.
And up next, we have used Mamak, which unlike the used callback, which memorizers or remembers the
function.
So if the card didn't change, that means we don't need to recreate function from the scratch.
The use memo deals with a value.
So, like I said, please don't mix and match the two where react memory will essentially be looking
for the props and see whether the prompts change or they use mammo is specifically for the value.
Now, in order to set up our example, I'm going to create a function first that returns some kind of
value.
So in here, I'll cycle here late again.
I'm somewhat of the fan of explicit names for my function.
So expensive.
And serve here and then I'll pass in there and what I'm trying to do with this function is just to calculate
the most expensive value as far as my product.
And the way we set up the logic, I'm just going to return from this function a value using the reduced
function, so I'm going to go with data, whatever I'm passing in.
And I can tell you right away that I will be passing in the product, then I'll use the reduced function.
And again, it's not really important what I'm doing over here in this Colquitt most expensive one.
But since I would want to make it a little bit more realistic, I will actually calculate the value
from my items.
Keep in mind that you can return for this example, some kind of random value and can work exactly the
same.
So in here I'm iterating over my products and I know that the price is sitting in a field and price.
And again, if you want to double check that, you can see it over here.
I have my right I have my object.
That, of course, represents that one specific product.
And then I have this value for a price.
So that's what I'm looking for, where I would want to reduce it down to that one single value, which
is the biggest one.
So that's why I'll say that I'll be returning a number and I'll divide it right away by one hundred
because the price is incents.
And then I'm just going to say that there is a price variable and that is equal to ihram fields and
the price.
So that is the property here.
And we know that we reduce we always need to return the total.
Correct.
That is my first parameter.
And I'll just say that if the price of that variable is bigger than the current total one, well, then
the total essentially will be equal to that price.
So I'm simply checking for the highest value of the price, whatever it is.
And then once I have my function, what I would want in my return.
Right above the big board, below the cart and another heading one, and here I'll say most expensive
and that is equal again to a dollar sign, I guess I will make the most sense and I'm going to go with
most or you know what, sorry, the function name was Colquitt most expensive.
And then I would want to pass in my product.
And what we need to keep in mind that we talk about some functions that take a long time to calculate.
So the function returns a value.
But let's imagine that it takes a long time to calculate this value.
And if I log, I'll be able to see that every time I click.
For example, on the account, I'm calling this Hello.
And imagine that if this function takes a long time to get that value, it's somewhat of a pain because
I'm calling this every time I'm updating the state value.
So it would be nice if I would somehow be able to remember that value and only recalculate it or essentially
run it one more time to function if my data changes.
So in my case, of course, that is the product.
Correct, because that's what we're passing in.
And this is where you use Memmo comes into play where we go with CONSED and I need to come up with some
kind of variable in this case, so I will just rename it to Most Expensive over here.
Then I call use my mouth.
So that's my hook and where we need to pass into use.
Mammo is a callback function and the first thing we need to set up is the function that returns a value
which in our case of course is calculate most expensive than we invoke it like so.
And the second thing is the dependency array.
And again, in this case, I'm passing in the product.
And then of course, I need to change from Colquitt, most expensive to most expensive, and I can remove
those products right now.
So what you notice that it is still the same value.
So we still call this function.
But then every time we click on account, what, we don't see the helo.
Correct.
So that means, of course, we're not calling this function.
We remember the value using the use.
And not only when the products change, essentially the data that we're passing, and only then we run
the function one more time and recalculate the value.
So that is react mammo use callback as well as use my mom hook and react.