1
00:00:00,820 --> 00:00:05,890
In the last video we saw the real issue that's going on inside of our project we are overfishing our

2
00:00:05,890 --> 00:00:06,720
users.

3
00:00:06,730 --> 00:00:11,590
We only have to fetch each user once but right now we're fetching them 10 times in very short order.

4
00:00:11,620 --> 00:00:14,410
So we need to figure out some way to fix this in this video.

5
00:00:14,410 --> 00:00:16,970
We're going to start taking a look at one possible solution.

6
00:00:17,080 --> 00:00:21,820
This is going to be just a couple of lines of code that we're going to change but it's also kind of

7
00:00:21,820 --> 00:00:25,140
hard to understand exactly what's going on with this solution.

8
00:00:25,150 --> 00:00:28,330
So that's why we're going to take a look at two possible ways of fixing this problem.

9
00:00:28,680 --> 00:00:28,910
OK.

10
00:00:28,930 --> 00:00:29,820
So first things first.

11
00:00:29,820 --> 00:00:35,170
I can give you a little bit of background on a helper function that we're going to use inside of a new

12
00:00:35,170 --> 00:00:35,990
browser tab.

13
00:00:36,060 --> 00:00:40,180
I'm going to navigate to load ashed dot com slash docs.

14
00:00:40,300 --> 00:00:45,370
We've looked at load ash very briefly before load ASH is a utility javascript library.

15
00:00:45,370 --> 00:00:50,950
It has a ton of functions built into it that make writing up javascript just a little bit easier on

16
00:00:50,950 --> 00:00:52,530
the search bar on the left hand side.

17
00:00:52,570 --> 00:00:55,350
I'm going to look up a function called Memel eyes.

18
00:00:55,450 --> 00:00:59,140
So this is a function that we're going to use to fix our problem.

19
00:00:59,140 --> 00:01:02,260
The memorized function is kind of hard to describe with words.

20
00:01:02,290 --> 00:01:04,840
I'm not even going to bother to try to do so.

21
00:01:04,900 --> 00:01:09,370
Instead we're going to write out a really quick code snippet example to help you understand what this

22
00:01:09,370 --> 00:01:13,500
memorized thing does and how it's going to help us solve this problem.

23
00:01:13,510 --> 00:01:18,340
All right so onload and stuck come I'm going to open up my chrome console.

24
00:01:18,520 --> 00:01:23,220
Now make sure that you are on load ashcan as well if you want to write the same code.

25
00:01:23,230 --> 00:01:29,050
The reason that I want you to open up your console on load ash is because the load Eshe library is automatically

26
00:01:29,050 --> 00:01:30,980
injected onto Windows scope.

27
00:01:31,240 --> 00:01:36,260
So we can write out a simple underscore like so and that is a reference to the load ash library.

28
00:01:36,310 --> 00:01:38,780
And again that is only a pixel on lodestar column.

29
00:01:38,820 --> 00:01:43,570
If you go to some other Web site you're not going to have it available on Windows scope.

30
00:01:43,600 --> 00:01:43,860
All right.

31
00:01:43,870 --> 00:01:49,630
So inside of here we're going to write out a quick function that is very similar to our fetch users

32
00:01:49,690 --> 00:01:51,790
function inside of our project.

33
00:01:51,790 --> 00:01:56,260
So I don't want to create a new function called Get user.

34
00:01:56,380 --> 00:01:58,580
This is going to be called with an ID.

35
00:01:58,660 --> 00:02:03,640
Now I'm going to go down to a new line here to get a new line inside of your chrome console.

36
00:02:03,640 --> 00:02:08,530
You can hit shift enter like so if you just hit enter it's going to try to run that code which is not

37
00:02:08,530 --> 00:02:09,840
what we want just yet.

38
00:02:10,150 --> 00:02:13,780
Then inside of here I'm going to try to make a network request.

39
00:02:13,930 --> 00:02:15,670
With that give an ID.

40
00:02:15,950 --> 00:02:18,580
Remember the fetch function is built into your browser.

41
00:02:18,580 --> 00:02:20,550
It will make a network request.

42
00:02:20,650 --> 00:02:26,250
Now we do not have any API or anything like that hooked up on lodestar.

43
00:02:26,470 --> 00:02:31,660
So if we just call Fettes right now with some random ID we're probably going to see a 404 not found

44
00:02:31,690 --> 00:02:34,180
error message which is totally fine.

45
00:02:34,420 --> 00:02:38,320
I just want to show you that we can make a request from inside this function and you're going to very

46
00:02:38,320 --> 00:02:41,310
quickly see how memorize changes the behavior.

47
00:02:41,620 --> 00:02:44,250
We're going to see that 404 but it's totally fine.

48
00:02:44,270 --> 00:02:47,930
You're still going to be able to see exactly what is really happening with.

49
00:02:48,310 --> 00:02:48,690
OK.

50
00:02:48,700 --> 00:02:56,980
And after that I'm going to return made a request like so as a string and then I'm going to close off

51
00:02:56,980 --> 00:02:59,200
that function.

52
00:02:59,210 --> 00:03:06,260
All right so now we have the get user function and we can call it by saying get user and then passing

53
00:03:06,260 --> 00:03:09,990
in some random number here like I'll put into.

54
00:03:10,020 --> 00:03:15,650
So it says made a request and you can see my network request log that I made a request to slash to.

55
00:03:15,840 --> 00:03:21,660
Now in this case it just happens by chance that Slash to is a valid route on this Web site.

56
00:03:21,660 --> 00:03:27,120
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

57
00:03:27,120 --> 00:03:28,230
request here right.

58
00:03:28,230 --> 00:03:32,050
We called it user and we made a request that's all I want you to understand right now.

59
00:03:32,400 --> 00:03:36,290
Likewise we can call it user with three and we made a request as well.

60
00:03:36,300 --> 00:03:38,620
And we saw the string done here made a request.

61
00:03:38,850 --> 00:03:39,120
OK.

62
00:03:39,150 --> 00:03:41,390
Now it's time to focus on mammals.

63
00:03:41,490 --> 00:03:48,060
So I'm going to create a new variable called minimalized get user and that's going to be the result

64
00:03:48,090 --> 00:03:54,560
of calling underscore men Alais and then I'm going to pass in my get user function like so.

65
00:03:54,570 --> 00:03:59,580
Notice how there are no parentheses on here after get user we just call them lies and we pass in the

66
00:03:59,790 --> 00:04:01,440
user function itself.

67
00:04:02,060 --> 00:04:06,860
Now when we do that memorize is going to take our function it's going to wrap it up with a bunch of

68
00:04:06,920 --> 00:04:12,890
additional code and it's going to return a new copy of our get user function and this new copy is what

69
00:04:12,890 --> 00:04:16,790
we refer to as the memorized version of the function.

70
00:04:16,790 --> 00:04:23,090
So this right here memorize get user is a new function that has the same behavior of as our old function

71
00:04:23,090 --> 00:04:25,400
that we were just wrote a second ago.

72
00:04:25,490 --> 00:04:33,320
The only difference is that we can only call memorize user 1 time with any unique set of arguments after

73
00:04:33,320 --> 00:04:35,380
we call it one time we can still call it.

74
00:04:35,450 --> 00:04:38,930
But the original function is not going to be actually invoked.

75
00:04:39,080 --> 00:04:44,540
Instead memorize is just going to return whatever we had returned previously the last time we ran it

76
00:04:44,660 --> 00:04:47,380
with the identical set of arguments.

77
00:04:47,390 --> 00:04:50,830
Now even when I say that again with words it doesn't make a lot of sense.

78
00:04:50,870 --> 00:04:53,560
So let's try looking at a quick example here.

79
00:04:53,570 --> 00:04:54,870
I'm now going to call memorized.

80
00:04:54,890 --> 00:05:02,270
Get user and I'm going to pass in theory as the argument now the first time that I call this with three

81
00:05:02,630 --> 00:05:08,990
the request is going to made it is going to run our original function and we can notice that is the

82
00:05:08,990 --> 00:05:13,790
case because we see the request three up here was made and we see that we returned the value made a

83
00:05:13,790 --> 00:05:14,930
request.

84
00:05:14,930 --> 00:05:16,080
Now here's the key part.

85
00:05:16,270 --> 00:05:23,170
Clear the requests log and I'm going to run that same exact call a second time the second time I do

86
00:05:23,170 --> 00:05:23,430
it.

87
00:05:23,470 --> 00:05:24,920
The request is not made.

88
00:05:25,120 --> 00:05:30,700
So when we memorize a function the original function only runs one time just once.

89
00:05:30,750 --> 00:05:35,070
And then any sound we call it again in the future the function itself is not going to run.

90
00:05:35,080 --> 00:05:39,340
Instead we are just going to return whatever was returned the previous time.

91
00:05:39,490 --> 00:05:42,300
So we still see the return value of made a request right here.

92
00:05:42,400 --> 00:05:49,270
But we did not run the original function and actually make the request but that's only on a basis of

93
00:05:49,270 --> 00:05:51,220
the unique arguments that we pass in.

94
00:05:51,220 --> 00:05:55,470
So if I pass in a new unique argument year like say two instead of three.

95
00:05:55,540 --> 00:06:01,090
Now the first time I run this function with to the original function get user is going to be ran again.

96
00:06:01,270 --> 00:06:07,290
So I can run this to all see it makes the request now clear that read log or run to again.

97
00:06:07,300 --> 00:06:09,880
And now you'll notice that it did not make the request.

98
00:06:09,880 --> 00:06:14,060
Likewise I can try to do this with for the first time it's got to make the request.

99
00:06:14,170 --> 00:06:17,380
But then each subsequent time it does not make the request.

100
00:06:17,410 --> 00:06:22,090
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

101
00:06:22,090 --> 00:06:27,690
three to and it does not make the request.

102
00:06:27,760 --> 00:06:29,160
Again just my guess.

103
00:06:29,210 --> 00:06:32,150
This is basically the perfect solution for our problem.

104
00:06:32,150 --> 00:06:38,600
We only want to build a call our action Creator with a unique ID one time because we only want to fetch

105
00:06:38,630 --> 00:06:44,000
each user one time and then if we call our action creator with that same ID again in the future we don't

106
00:06:44,000 --> 00:06:46,030
really want to make the request at all.

107
00:06:46,070 --> 00:06:50,050
So memorizing our action creator could be a very good solution here.

108
00:06:50,100 --> 00:06:51,170
So let's take a quick pause.

109
00:06:51,180 --> 00:06:53,950
It'll start to implement this inside of a project in the next video.