1
00:00:01,270 --> 00:00:05,150
Now that we've got a better idea of what's going on let's figure out how to solve this issue.

2
00:00:05,350 --> 00:00:10,630
So to solve this I want to remind you inside of U.S. location what the purpose of that second argument

3
00:00:10,630 --> 00:00:12,110
to use effect is.

4
00:00:12,130 --> 00:00:17,470
Remember we can pass in no argument an empty array or an array with some number of things inside of

5
00:00:17,470 --> 00:00:18,250
it.

6
00:00:18,340 --> 00:00:23,620
The way this array right here works is anytime any value inside there changes in between renders of

7
00:00:23,620 --> 00:00:27,490
our component the use effect function is going to be called again.

8
00:00:27,520 --> 00:00:32,950
So in other words anytime should it track changes we're going to rerun that function right there now

9
00:00:33,000 --> 00:00:38,220
whenever we pass in some value here we can obviously put in like a boolean or a number or a string.

10
00:00:38,220 --> 00:00:42,370
And if we pass those in react is gonna do a comparison of their values.

11
00:00:42,390 --> 00:00:47,700
So it's going to say okay de true flip to false or did the number one go to two or did a string of high

12
00:00:47,700 --> 00:00:49,520
there go to buy there.

13
00:00:49,560 --> 00:00:55,200
Those are very obvious comparisons and very obvious changes but we can also put in more complex values

14
00:00:55,200 --> 00:00:56,670
inside of here as well.

15
00:00:56,670 --> 00:01:05,280
So we could also put in a value like an array or an object or even a function when we put in these more

16
00:01:05,280 --> 00:01:10,620
complex values the comparison done by react is a little bit more complicated react behind the scenes

17
00:01:10,650 --> 00:01:17,160
essentially says is this the exact same function in memory like Is this the same object where the same

18
00:01:17,160 --> 00:01:20,240
function or the exact same array.

19
00:01:20,380 --> 00:01:24,880
It doesn't look at what is actually inside of that function or what's inside the object or what's inside

20
00:01:24,880 --> 00:01:25,510
the array.

21
00:01:25,540 --> 00:01:31,600
It just checks to see if it's the exact same thing if it is the same thing then react is not going to

22
00:01:31,600 --> 00:01:33,110
rerun that function right there.

23
00:01:33,430 --> 00:01:37,510
But if it's a different function or a different array or different object being passed inside this array

24
00:01:37,930 --> 00:01:43,990
then react says Okay time to rerun that function so we can use this feature to our advantage.

25
00:01:44,020 --> 00:01:47,670
So going to flip back over to a quick diagram and help you understand what we're going to do.

26
00:01:48,060 --> 00:01:48,280
Okay.

27
00:01:48,310 --> 00:01:54,130
So once again during our first render we create one version of our callback with the reference to recording

28
00:01:54,190 --> 00:01:56,710
and by default recording is false.

29
00:01:56,710 --> 00:02:02,980
So we then pass that down into a use location use effect runs we call start watching and start watching

30
00:02:02,980 --> 00:02:08,320
now has a reference to this callback that we just created.

31
00:02:08,320 --> 00:02:12,590
Now let's imagine what happens when recording flips to true when recording goes to true.

32
00:02:12,700 --> 00:02:15,410
Our track rate screen is then going to re render itself.

33
00:02:15,520 --> 00:02:21,620
So we get a second render inside during that second render we now have a recording value of true.

34
00:02:21,970 --> 00:02:25,330
And at that point time we then create a second callback function.

35
00:02:25,330 --> 00:02:28,950
A second version a totally different function in memory.

36
00:02:29,020 --> 00:02:30,480
This callback function right here.

37
00:02:30,520 --> 00:02:34,420
Hundred percent different than the callback function we created during the first render.

38
00:02:34,720 --> 00:02:39,080
And just to be really clear about this I'm talking about the callback function that we create inside

39
00:02:39,100 --> 00:02:42,490
of track create screen that one right there.

40
00:02:42,490 --> 00:02:48,320
So we are creating a totally separate version of that function in memory.

41
00:02:48,370 --> 00:02:55,150
So what we can do is pass that thing down into use location as we currently are but we can now add that

42
00:02:55,150 --> 00:03:01,300
new callback to that array inside of easy effect because that is a totally different callback function

43
00:03:01,300 --> 00:03:06,550
in memory react is going to say oh there's a new value of callback I guess that means that we should

44
00:03:06,550 --> 00:03:12,460
rerun the U.S. fact function so effectively back inside of use location.

45
00:03:12,460 --> 00:03:18,070
We take that brand new callback the new callback that we just assembled inside of track create screen

46
00:03:18,580 --> 00:03:23,920
and we can put it in as another value inside of that array like so now.

47
00:03:23,980 --> 00:03:26,440
Quick note do not save this code right here.

48
00:03:26,440 --> 00:03:27,400
I'm going put a big comment.

49
00:03:27,400 --> 00:03:28,680
Don't save.

50
00:03:28,880 --> 00:03:30,970
There's a real big issue with this.

51
00:03:31,000 --> 00:03:32,910
This is going to solve the issue kind of.

52
00:03:32,950 --> 00:03:35,950
But it opens us up to a really nasty bug.

53
00:03:36,070 --> 00:03:40,120
So don't save your code right here and as a matter of fact I would encourage you to just delete it because

54
00:03:40,120 --> 00:03:44,820
that's not going to be like the final thing we put inside of here nonetheless.

55
00:03:44,830 --> 00:03:49,570
We can kind of imagine that this solves our issue now every single time that we render our track create

56
00:03:49,570 --> 00:03:50,350
screen.

57
00:03:50,350 --> 00:03:55,270
We're building up a brand new version of our callback function passing inside of here and giving it

58
00:03:55,270 --> 00:03:56,840
to use effect.

59
00:03:56,860 --> 00:04:01,630
So now whenever react takes a look at that array between re renders of our component it's going to say

60
00:04:01,900 --> 00:04:05,460
oh brand new function totally dissimilar from the last one we got.

61
00:04:05,470 --> 00:04:07,750
It's a different function in memory.

62
00:04:07,750 --> 00:04:14,350
So it's react is going to say Time to rerun that function when this function gets ran start watching

63
00:04:14,350 --> 00:04:15,900
is going to be invoked again.

64
00:04:15,910 --> 00:04:20,860
So a second time third time fourth time whatever and that second time third time whatever.

65
00:04:20,860 --> 00:04:26,690
Start watching is going to run and now we are going to have callback right here callback is going to

66
00:04:26,690 --> 00:04:32,420
be a reference to the latest version of callback that we just passed in as opposed to a reference to

67
00:04:32,420 --> 00:04:36,800
like the first version we passed in so why does this not work.

68
00:04:37,310 --> 00:04:42,710
Well it doesn't work because we're essentially saying that every single time we re render track create

69
00:04:42,710 --> 00:04:47,900
screen we're building up a new version of this callback function right here we're passing it in and

70
00:04:47,900 --> 00:04:52,940
that means every single time that track rate screen updates we are rerunning that code right there.

71
00:04:52,940 --> 00:04:58,350
Some of the words we are calling start watching many many many times.

72
00:04:58,370 --> 00:04:59,680
So let me show you what's going to happen.

73
00:04:59,690 --> 00:05:05,560
If I were to save this song to save this I will go back over.

74
00:05:05,890 --> 00:05:11,460
I'm going to go to track create screen and hit start recording and then I going to go to my terminal.

75
00:05:11,470 --> 00:05:14,840
Remember I stole the console log of the number of locations that I have.

76
00:05:14,860 --> 00:05:16,870
So back over here I can now see that.

77
00:05:16,870 --> 00:05:21,790
Sure enough I'm getting a console log of the correct number of locations and is going six seven eight

78
00:05:21,790 --> 00:05:22,660
blah blah blah.

79
00:05:22,660 --> 00:05:26,410
Now here's the problem every single time that we see one is console logs.

80
00:05:26,410 --> 00:05:29,770
That means that essentially our entire application is re rendering itself.

81
00:05:30,340 --> 00:05:34,840
So that means track rate screen is being re executed.

82
00:05:34,840 --> 00:05:39,230
It's building up a new version of that callback function passing it into use location.

83
00:05:39,280 --> 00:05:44,250
And now we are calling the code inside of here again and again and again and again and again.

84
00:05:44,410 --> 00:05:50,170
And that means that we're starting this watching process and calling watch position async like many

85
00:05:50,170 --> 00:05:52,710
many many times per second.

86
00:05:52,750 --> 00:05:57,820
And so the net result of that is inevitably at some point time our application is going to crash and

87
00:05:57,820 --> 00:06:02,590
as a matter of fact if I start to like try to tap on stop like I'm clicking on stop right now nothing's

88
00:06:02,590 --> 00:06:03,170
happening.

89
00:06:03,280 --> 00:06:05,320
I can try to click on track list flow.

90
00:06:05,320 --> 00:06:06,430
Nothing's happening.

91
00:06:06,430 --> 00:06:10,410
So our application has crashed because we are calling watch position async.

92
00:06:10,510 --> 00:06:13,060
Many many many many times per second.

93
00:06:13,300 --> 00:06:16,300
And eventually like I said leads to a crash.

94
00:06:16,330 --> 00:06:20,430
So although this kind of solves our issue it also kind of doesn't.

95
00:06:20,500 --> 00:06:26,890
We are getting our update correctly but we're just calling the code inside of here way too often so

96
00:06:26,900 --> 00:06:31,460
at some point time if I flip back over my terminal I'm eventually gonna see a really nasty error message

97
00:06:31,460 --> 00:06:35,780
over here and then at some point time after like a couple more seconds I'm going to eventually get a

98
00:06:35,780 --> 00:06:42,950
crash and I'll have to restart my bundler so clearly although this kind of works it still doesn't really

99
00:06:42,950 --> 00:06:43,250
work.

100
00:06:43,250 --> 00:06:43,490
Okay.

101
00:06:43,490 --> 00:06:43,850
There we go.

102
00:06:43,850 --> 00:06:43,990
Yeah.

103
00:06:44,000 --> 00:06:46,000
That's a nice error message.

104
00:06:46,190 --> 00:06:51,140
So clearly again works but not ideal there's still a little bit more we have to do.

105
00:06:51,180 --> 00:06:52,640
Let's take another quick pause right here.

106
00:06:52,700 --> 00:06:56,330
Come back in the next video and get a better idea of how to solve this problem.