1
00:00:00,960 --> 00:00:04,500
In the last video we kind of solved our problem but also kind of not.

2
00:00:04,550 --> 00:00:08,810
So again the issue here is that every single time that we re rendered track create screen we're getting

3
00:00:08,840 --> 00:00:13,790
a different callback function created that causes us to call start watching again and again and again

4
00:00:13,820 --> 00:00:14,380
and again.

5
00:00:14,480 --> 00:00:15,600
Not ideal.

6
00:00:15,620 --> 00:00:19,160
So in this video we're gonna figure out a slightly different way to approach this problem.

7
00:00:19,190 --> 00:00:24,050
It's not going to be a complete solution but it's gonna kind of get us like 50 percent of the way there.

8
00:00:24,140 --> 00:00:26,660
So back inside of a track create screen again.

9
00:00:26,690 --> 00:00:29,560
The problem is all around that callback function.

10
00:00:29,570 --> 00:00:34,760
We don't want to recreate that from scratch every single time that we call track create screen to avoid

11
00:00:34,760 --> 00:00:38,900
doing so we're going to import another hook from the react library.

12
00:00:38,900 --> 00:00:42,450
This hook is called use callback.

13
00:00:42,460 --> 00:00:47,470
Now use callback is essentially designed to solve the exact issue that we're running into right now.

14
00:00:47,480 --> 00:00:51,950
Let me show you how to use use callback and then that might help give you a better idea of how it's

15
00:00:51,950 --> 00:00:56,780
going to solve our problems so right above where we call use location.

16
00:00:56,780 --> 00:01:02,820
I can define a new variable called simply callback and I'm going to assign to this the result of use

17
00:01:02,820 --> 00:01:05,200
callback as a first argument.

18
00:01:05,210 --> 00:01:09,770
I'm going to put in our call callback function so that's that thing right there.

19
00:01:09,800 --> 00:01:15,160
So I'm going to cut that and throw it into use callback then as a second argument.

20
00:01:15,170 --> 00:01:16,480
Here's where the magic is.

21
00:01:16,540 --> 00:01:22,700
I'm going to put in an array and I'm going to put in a list of kind of dependencies or variables that

22
00:01:22,700 --> 00:01:28,070
I want to watch this array right here is just about identical to the array that we pass into use effect

23
00:01:28,690 --> 00:01:35,030
any time any variable inside of here changes we're going to essentially rebuild that callback from scratch.

24
00:01:35,090 --> 00:01:41,060
So for you and I the only time we ever want to rebuild that callback right there is when state DOT recording

25
00:01:41,060 --> 00:01:41,960
changes.

26
00:01:42,070 --> 00:01:48,470
So inside of that array I'll add in state DOT recording like so now I can take this callback and pass

27
00:01:48,470 --> 00:01:51,130
it in as the second argument.

28
00:01:51,170 --> 00:01:52,510
All right so what's going on here.

29
00:01:52,520 --> 00:01:54,730
This is code is like good we want this right here.

30
00:01:54,740 --> 00:01:57,120
But what does this really doing for us.

31
00:01:57,140 --> 00:01:59,730
Let's take a look at a diagram.

32
00:01:59,870 --> 00:02:00,080
OK.

33
00:02:00,120 --> 00:02:05,490
So the entire goal of use callback is to limit the number of times that we create a new callback function

34
00:02:06,430 --> 00:02:11,860
so let's imagine the very first time that we call use callback we pass we call use callback and we pass

35
00:02:11,860 --> 00:02:14,740
in some callback function as the first argument.

36
00:02:14,770 --> 00:02:20,540
So that might be some function that we call like version one of our callback function then as a second

37
00:02:20,540 --> 00:02:24,860
argument we might pass in an array with the value of a string like Hi there.

38
00:02:24,860 --> 00:02:30,880
So that's what goes on during maybe the very first render of our component the result of use callback

39
00:02:31,110 --> 00:02:34,900
is it's going to essentially take that callback function right there and just return it.

40
00:02:34,900 --> 00:02:41,200
So the result of that expression is our callback function so now we can imagine what happens during

41
00:02:41,200 --> 00:02:46,150
the second time our component gets rendered well during the second time we might build up an entire

42
00:02:46,180 --> 00:02:48,370
new version of our callback function.

43
00:02:48,370 --> 00:02:55,140
So it's like callback B2 of our callback function totally new function in memory but as a second argument

44
00:02:55,380 --> 00:03:01,260
let's imagine that we once again put in an array with a string of hi there because between render one

45
00:03:01,320 --> 00:03:05,150
and render to the only value inside that array is identical.

46
00:03:05,150 --> 00:03:07,050
In other words hasn't changed at all.

47
00:03:07,200 --> 00:03:12,900
Rather than returning this new callback function that we just assembled used callback returns the first

48
00:03:12,900 --> 00:03:18,870
version instead it says OK well your list of like dependencies right here these different values hasn't

49
00:03:18,870 --> 00:03:19,740
changed.

50
00:03:19,740 --> 00:03:24,660
So rather than building up a new function and returning it it's going to return the same exact function

51
00:03:24,870 --> 00:03:31,660
from the first time we rendered our component the same function in memory so now we can can imagine

52
00:03:31,870 --> 00:03:36,910
that maybe our component renders a third time and maybe during this third time we pass in the string

53
00:03:36,940 --> 00:03:38,260
of by there instead.

54
00:03:39,040 --> 00:03:41,980
So now the only value inside this array is different.

55
00:03:41,980 --> 00:03:44,980
It's changed so because that value changed.

56
00:03:44,980 --> 00:03:50,140
Use callback is going to say okay because that value change rather than passing back the same callback

57
00:03:50,170 --> 00:03:51,300
we were working with before.

58
00:03:51,310 --> 00:03:55,460
I'm not going to pass a return version 3 of that callbacks this diagram right here.

59
00:03:55,480 --> 00:04:00,680
My mistake that box should actually say V3 So this solves exactly the problem.

60
00:04:00,710 --> 00:04:05,270
We are running into it saying that OK at some point time we're going to creating this callback function

61
00:04:05,300 --> 00:04:10,920
and we might not want to be recreating it from scratch every single time our component renders.

62
00:04:11,030 --> 00:04:15,370
So instead it gives us the ability to throw in a function like just this first time.

63
00:04:15,560 --> 00:04:21,140
And so long as that array of values right there doesn't change we're always going to get back the same

64
00:04:21,230 --> 00:04:22,910
function in memory.

65
00:04:22,910 --> 00:04:28,630
It's only when that value inside that array changes that we're going to get back a new function so think

66
00:04:28,630 --> 00:04:34,910
about what that does to our useful creation hook now because we're saying only give me a new callback

67
00:04:34,910 --> 00:04:40,730
function whenever recording changes we take the resulting callback we pass it into use location.

68
00:04:40,790 --> 00:04:45,860
So now inside of our use effect inside of used location we're essentially going to be always working

69
00:04:45,890 --> 00:04:54,920
with the exact same function in memory until the value of state DOT recording changes as soon as that

70
00:04:54,920 --> 00:04:55,920
value changes.

71
00:04:55,940 --> 00:05:01,700
We're then going to rerun that stuff right there and that means we're going to call start watching again

72
00:05:03,020 --> 00:05:09,200
start watching is going to rerun and it's now going to call watch position async with the latest version

73
00:05:09,410 --> 00:05:15,320
of our callback and all this only occurs when we get a new version of callback.

74
00:05:15,330 --> 00:05:20,880
And the only way to get a new version of callback is if the value of state DOT recording changes if

75
00:05:20,880 --> 00:05:24,570
that thing doesn't change right there then we're gonna get back the same callback that we passed in

76
00:05:24,570 --> 00:05:25,510
last time.

77
00:05:25,680 --> 00:05:32,230
And so our use effect function inside of use location will not run again so like I said this solves

78
00:05:32,230 --> 00:05:34,010
our issue mostly.

79
00:05:34,920 --> 00:05:35,220
OK.

80
00:05:35,260 --> 00:05:41,010
So I'm going to make sure that I save this file and I'm going to make sure that I've got callback over

81
00:05:41,010 --> 00:05:46,260
here so I'm going to tell you now if you save this like I said it's only a 50 percent solution.

82
00:05:46,260 --> 00:05:51,570
This will still eventually result in a crash but nowhere near as quickly as what we current what I just

83
00:05:51,570 --> 00:05:53,120
showed you a moment before.

84
00:05:53,130 --> 00:05:58,140
So at this point you can decide to either add in callback right there or leave it out for just another

85
00:05:58,140 --> 00:06:01,370
moment while we discuss the like last little change we have to make inside of here.

86
00:06:01,890 --> 00:06:07,160
Either way I'm going to save with callback right there and with use callback over here as well you know

87
00:06:07,190 --> 00:06:09,770
we can make sure that this saves without immediately crashing.

88
00:06:09,780 --> 00:06:10,000
OK.

89
00:06:10,020 --> 00:06:18,710
So time to save all go back over I'll go to try create I'll hit start recording now go to my terminal

90
00:06:19,310 --> 00:06:28,130
and verify that I still get the changing values yep definitely do and back over here I am still able

91
00:06:28,130 --> 00:06:33,640
to interact with the application so it definitely has not actually crashed this time around so I can

92
00:06:33,640 --> 00:06:38,980
click stop and it stops recording and at that point time I should no longer see any changes to our list

93
00:06:38,980 --> 00:06:40,510
of locations yet.

94
00:06:40,580 --> 00:06:44,540
So now it's just stuck on 17 so that a doubt this definitely works.

95
00:06:44,680 --> 00:06:50,470
It's a good solution but as I've said like four or five times now it only takes us like 50 percent of

96
00:06:50,470 --> 00:06:51,780
the way there.

97
00:06:51,820 --> 00:06:53,280
So let's take another quick pause.

98
00:06:53,290 --> 00:06:57,250
We're going to come back the next video and discuss how we're going to get the remaining 50 percent

99
00:06:57,250 --> 00:07:01,480
of this fixed in place and I'm also gonna make sure that it's really clear exactly why this is only

100
00:07:01,480 --> 00:07:05,800
kind of a 50 percent solution so a quick pause and I'll see you in just a minute.