In the last video we saw the real issue that's going on inside of our project we are overfishing our
users.
We only have to fetch each user once but right now we're fetching them 10 times in very short order.
So we need to figure out some way to fix this in this video.
We're going to start taking a look at one possible solution.
This is going to be just a couple of lines of code that we're going to change but it's also kind of
hard to understand exactly what's going on with this solution.
So that's why we're going to take a look at two possible ways of fixing this problem.
OK.
So first things first.
I can give you a little bit of background on a helper function that we're going to use inside of a new
browser tab.
I'm going to navigate to load ashed dot com slash docs.
We've looked at load ash very briefly before load ASH is a utility javascript library.
It has a ton of functions built into it that make writing up javascript just a little bit easier on
the search bar on the left hand side.
I'm going to look up a function called Memel eyes.
So this is a function that we're going to use to fix our problem.
The memorized function is kind of hard to describe with words.
I'm not even going to bother to try to do so.
Instead we're going to write out a really quick code snippet example to help you understand what this
memorized thing does and how it's going to help us solve this problem.
All right so onload and stuck come I'm going to open up my chrome console.
Now make sure that you are on load ashcan as well if you want to write the same code.
The reason that I want you to open up your console on load ash is because the load Eshe library is automatically
injected onto Windows scope.
So we can write out a simple underscore like so and that is a reference to the load ash library.
And again that is only a pixel on lodestar column.
If you go to some other Web site you're not going to have it available on Windows scope.
All right.
So inside of here we're going to write out a quick function that is very similar to our fetch users
function inside of our project.
So I don't want to create a new function called Get user.
This is going to be called with an ID.
Now I'm going to go down to a new line here to get a new line inside of your chrome console.
You can hit shift enter like so if you just hit enter it's going to try to run that code which is not
what we want just yet.
Then inside of here I'm going to try to make a network request.
With that give an ID.
Remember the fetch function is built into your browser.
It will make a network request.
Now we do not have any API or anything like that hooked up on lodestar.
So if we just call Fettes right now with some random ID we're probably going to see a 404 not found
error message which is totally fine.
I just want to show you that we can make a request from inside this function and you're going to very
quickly see how memorize changes the behavior.
We're going to see that 404 but it's totally fine.
You're still going to be able to see exactly what is really happening with.
OK.
And after that I'm going to return made a request like so as a string and then I'm going to close off
that function.
All right so now we have the get user function and we can call it by saying get user and then passing
in some random number here like I'll put into.
So it says made a request and you can see my network request log that I made a request to slash to.
Now in this case it just happens by chance that Slash to is a valid route on this Web site.
So we did not actually get a for a for in this case but suffice it to say you can see that we made a
request here right.
We called it user and we made a request that's all I want you to understand right now.
Likewise we can call it user with three and we made a request as well.
And we saw the string done here made a request.
OK.
Now it's time to focus on mammals.
So I'm going to create a new variable called minimalized get user and that's going to be the result
of calling underscore men Alais and then I'm going to pass in my get user function like so.
Notice how there are no parentheses on here after get user we just call them lies and we pass in the
user function itself.
Now when we do that memorize is going to take our function it's going to wrap it up with a bunch of
additional code and it's going to return a new copy of our get user function and this new copy is what
we refer to as the memorized version of the function.
So this right here memorize get user is a new function that has the same behavior of as our old function
that we were just wrote a second ago.
The only difference is that we can only call memorize user 1 time with any unique set of arguments after
we call it one time we can still call it.
But the original function is not going to be actually invoked.
Instead memorize is just going to return whatever we had returned previously the last time we ran it
with the identical set of arguments.
Now even when I say that again with words it doesn't make a lot of sense.
So let's try looking at a quick example here.
I'm now going to call memorized.
Get user and I'm going to pass in theory as the argument now the first time that I call this with three
the request is going to made it is going to run our original function and we can notice that is the
case because we see the request three up here was made and we see that we returned the value made a
request.
Now here's the key part.
Clear the requests log and I'm going to run that same exact call a second time the second time I do
it.
The request is not made.
So when we memorize a function the original function only runs one time just once.
And then any sound we call it again in the future the function itself is not going to run.
Instead we are just going to return whatever was returned the previous time.
So we still see the return value of made a request right here.
But we did not run the original function and actually make the request but that's only on a basis of
the unique arguments that we pass in.
So if I pass in a new unique argument year like say two instead of three.
Now the first time I run this function with to the original function get user is going to be ran again.
So I can run this to all see it makes the request now clear that read log or run to again.
And now you'll notice that it did not make the request.
Likewise I can try to do this with for the first time it's got to make the request.
But then each subsequent time it does not make the request.
And so I can run this now as many times as I want with four I can run it as many times that I want with
three to and it does not make the request.
Again just my guess.
This is basically the perfect solution for our problem.
We only want to build a call our action Creator with a unique ID one time because we only want to fetch
each user one time and then if we call our action creator with that same ID again in the future we don't
really want to make the request at all.
So memorizing our action creator could be a very good solution here.
So let's take a quick pause.
It'll start to implement this inside of a project in the next video.