1 00:00:01,210 --> 00:00:05,510 In the last video we ran into a little bug when we tried to print out the number of locations that we 2 00:00:05,510 --> 00:00:06,470 picked up. 3 00:00:06,470 --> 00:00:10,730 So if I go over to track create we're going to and then hit start recording. 4 00:00:10,880 --> 00:00:16,440 We're going to very quickly see 0 zero zero console logged out at our terminal once per second. 5 00:00:16,580 --> 00:00:21,570 So that means that inside of our location context here it is right here. 6 00:00:21,590 --> 00:00:27,440 It means that our ad location where we tried to add into our list of locations that we're tracking for 7 00:00:27,440 --> 00:00:30,010 our user is not functioning correctly. 8 00:00:30,040 --> 00:00:33,210 So in this video we're going to try to figure out what is going on. 9 00:00:33,250 --> 00:00:35,770 I'm going to point out the source of the problem right away. 10 00:00:35,770 --> 00:00:40,690 I'm going to tell you why this is not functioning correctly but really understanding why it's not functioning 11 00:00:40,690 --> 00:00:43,390 correctly is going to take a little bit of time. 12 00:00:43,450 --> 00:00:47,360 So inside of my use location not J.S. file here is use location. 13 00:00:47,380 --> 00:00:50,250 Remember this is our custom hook at the very bottom. 14 00:00:50,260 --> 00:00:52,420 We called use effect right there. 15 00:00:53,170 --> 00:00:54,660 So this use effect call. 16 00:00:54,670 --> 00:00:56,850 That is the source of our troubles. 17 00:00:56,860 --> 00:01:01,880 This is why we are seeing 0 0 0 every time we get that console log. 18 00:01:01,900 --> 00:01:07,600 So like I said I'll tell you exactly where our code is malfunctioning but that doesn't really explain 19 00:01:07,630 --> 00:01:09,430 why it's malfunctioning. 20 00:01:09,430 --> 00:01:14,150 Understanding why this use effect call is not working as expected is going to be just a little bit challenging. 21 00:01:14,200 --> 00:01:18,460 So to help you understand why this is not working correctly we're going to take a look at a look at 22 00:01:18,460 --> 00:01:21,190 a little side example very quickly. 23 00:01:21,190 --> 00:01:26,650 So we're going to go to a Web site called Code Penn which is a very small online I.D. We're going to 24 00:01:26,650 --> 00:01:29,320 write out a quick example using react on the web. 25 00:01:29,320 --> 00:01:34,930 So like normal react J.S. we're doing this just help you understand some very subtle issues that come 26 00:01:34,930 --> 00:01:38,050 into play when we make use of use effect. 27 00:01:38,050 --> 00:01:42,110 So let's go over to code Penn and write out a very quick example. 28 00:01:42,340 --> 00:01:48,230 All right I'm gonna go to code Penn Io once here and going to create a new Penn. 29 00:01:48,540 --> 00:01:51,190 You should be able to create a pen without signing in at all. 30 00:01:51,240 --> 00:01:52,770 If you want to create an account and sign it. 31 00:01:52,800 --> 00:01:54,550 That's totally fine as well. 32 00:01:54,660 --> 00:01:59,710 So inside of here we're going to build out a very simple counter application with react J.S.. 33 00:01:59,790 --> 00:02:01,320 We're gonna write just a little bit of code here. 34 00:02:01,320 --> 00:02:03,290 So just bear with me for a moment. 35 00:02:03,360 --> 00:02:11,080 First off inside this each team l panel I'm gonna put a div with an idea of root then I'm going to collapse 36 00:02:11,080 --> 00:02:17,270 a CSF section like so and right next to J.S. I'm going to click on that little gear and we're going 37 00:02:17,270 --> 00:02:22,480 to wire up react to this code an idea very quickly under the javascript tab. 38 00:02:22,520 --> 00:02:27,940 I'm going to select a javascript pretty process pre processor of babble and then in the search box right 39 00:02:27,940 --> 00:02:34,390 here I'm going to search first for react and click it and then react dash Dom and click that as well. 40 00:02:34,720 --> 00:02:40,520 So I've now got two script entries inside of here one for react and one for react Dom I'll then go ahead 41 00:02:40,550 --> 00:02:43,820 and save and close. 42 00:02:43,860 --> 00:02:51,110 All right so now we're going to write out a very small react component to say const app inside of there 43 00:02:51,110 --> 00:02:53,560 I'm going to return a div. 44 00:02:54,050 --> 00:02:56,090 So again we're not writing react native code right now. 45 00:02:56,120 --> 00:03:03,040 This is react for the web inside of you're going to put two button elements the first one is gonna say 46 00:03:03,220 --> 00:03:11,670 increment and the second one I'll say decrement so as my guests we're gonna make a little counter. 47 00:03:12,120 --> 00:03:17,460 After that I'm going to place current count and that's going to eventually print out our current count 48 00:03:17,460 --> 00:03:19,910 like whatever our counter value is. 49 00:03:20,040 --> 00:03:24,240 So let's make sure that we initialize some piece of state called counter and we'll track it and try 50 00:03:24,240 --> 00:03:29,300 to incremented in decrement at any time we click on those buttons so to create a piece of state will 51 00:03:29,300 --> 00:03:32,620 say const counter and set counter. 52 00:03:32,620 --> 00:03:33,520 And that's going to come from. 53 00:03:33,560 --> 00:03:38,570 React dot use state and I'll put in an initial value of zero. 54 00:03:38,600 --> 00:03:42,620 Now one thing I want to point out really quickly inside of a code pen environment we don't get any import 55 00:03:42,620 --> 00:03:43,520 statements. 56 00:03:43,520 --> 00:03:48,020 So if we want to make access or refer to react or anything like that we say simply react. 57 00:03:48,020 --> 00:03:49,650 And then the function that we want to call. 58 00:03:49,780 --> 00:03:54,050 So that's why I'm saying react out you state right here as opposed to a import statement the very top 59 00:03:55,400 --> 00:03:55,630 OK. 60 00:03:55,640 --> 00:03:58,170 So we've now got the counter variable. 61 00:03:58,190 --> 00:04:01,730 Let's now make sure that this component shows up on the screen because right now our screen is empty. 62 00:04:01,730 --> 00:04:07,010 This is the result down here at the big white box so to render this component to the screen will say 63 00:04:07,280 --> 00:04:08,350 react Dom. 64 00:04:08,360 --> 00:04:16,130 Notice how it's capital D O M render my ab component and we'll we're going to pass in a reference to 65 00:04:16,130 --> 00:04:18,880 the H T.M. elements that we want to render that thing too. 66 00:04:18,890 --> 00:04:27,620 So it'll be document dot query selector with LB root like so and then after that I should see my two 67 00:04:27,620 --> 00:04:32,210 buttons and the current count appear all right now let's just very quickly make sure that whenever we 68 00:04:32,210 --> 00:04:36,200 tap on these buttons we increment or decrement our counter variable. 69 00:04:36,200 --> 00:04:38,780 So on the first button I'll say on click. 70 00:04:38,780 --> 00:04:45,050 So whenever someone clicks this thing I want to run set counter and I want to increase its value to 71 00:04:45,110 --> 00:04:56,320 counter plus 1 then on decrement I'll say on click set counter counter minus one okay. 72 00:04:56,350 --> 00:04:58,090 So just a very simple counter. 73 00:04:58,240 --> 00:05:02,830 If I now hit increment Yep goes up decrement Yep goes down. 74 00:05:02,830 --> 00:05:04,390 Nothing too crazy. 75 00:05:04,390 --> 00:05:08,680 So here's where things are gonna start to get really weird and this is where we're going to see a bug 76 00:05:08,710 --> 00:05:13,600 very similar to the one we have inside of our application start to materialize right after our you state 77 00:05:13,600 --> 00:05:13,970 call. 78 00:05:14,020 --> 00:05:19,240 I'm going to set up a use effect hook sung as they react use effect. 79 00:05:19,240 --> 00:05:23,860 Once again we're saying react use effect as opposed to just use effect because we don't have any import 80 00:05:23,860 --> 00:05:30,350 statements here and I'll put in an arrow function to run and just like we have back inside of our use 81 00:05:30,350 --> 00:05:35,590 location file I'm going to pass in an array as a second element I'm not going to put in a value inside 82 00:05:35,590 --> 00:05:41,430 there I'm going to leave it empty so as a second argument I'll put in empty array like so. 83 00:05:41,430 --> 00:05:45,030 So we've repeated many times throughout this case course we've said Oh yeah. 84 00:05:45,030 --> 00:05:46,110 Empty array means. 85 00:05:46,110 --> 00:05:50,880 This function runs just one time when this component first shows on the screen. 86 00:05:51,120 --> 00:05:55,590 So then inside of here we're going to set up a little set interval call. 87 00:05:55,590 --> 00:06:03,050 So I'll say set interval I'll pass in an arrow function and I want to run that function once every second. 88 00:06:03,050 --> 00:06:07,670 So I'll put it as the second argument to set interval 1000 milliseconds like so. 89 00:06:07,670 --> 00:06:11,470 So now this inner function right here is going to run once per second. 90 00:06:11,690 --> 00:06:13,160 So what are we going to do inside there. 91 00:06:13,160 --> 00:06:14,480 Well something very simple. 92 00:06:14,480 --> 00:06:17,390 I just want to console logout they counter variable. 93 00:06:17,510 --> 00:06:18,880 That's it. 94 00:06:18,890 --> 00:06:25,520 So inside there I'll put in console dot log counter so now think about what our component is doing on 95 00:06:25,520 --> 00:06:30,180 the one hand we've got the printout of the current count on the screen simultaneously. 96 00:06:30,200 --> 00:06:37,370 We're gonna get a console log once per second of whatever the value of counter is now to see the value 97 00:06:37,370 --> 00:06:38,300 of that console log. 98 00:06:38,300 --> 00:06:44,500 We can either hit console down here at the bottom left hand side and see a console appear alternatively 99 00:06:44,540 --> 00:06:49,530 what's a little bit easier is if you open up your developer console and move it over to the side it's 100 00:06:49,530 --> 00:06:54,750 just a bit easier to read over here right away you can see that I'm getting that console that log once 101 00:06:54,750 --> 00:06:56,880 per second that's why that number right there is going up. 102 00:06:57,030 --> 00:07:02,380 It means that I'm just getting the same value console logged out again and again and again OK. 103 00:07:02,380 --> 00:07:03,490 So now here's the weird part. 104 00:07:03,490 --> 00:07:06,260 Here's the entire point of this little example. 105 00:07:06,640 --> 00:07:12,310 I'm not going to start to change the value of counter so click on increment and look at increment like 106 00:07:12,490 --> 00:07:14,110 that value counter right there. 107 00:07:14,110 --> 00:07:14,350 Yep. 108 00:07:14,380 --> 00:07:16,210 It's gone all the way up to 20. 109 00:07:16,210 --> 00:07:24,460 However take a look at the console log the console log is still printing out 0 so on the screen I can 110 00:07:24,460 --> 00:07:28,570 very easily see current count of 20 like that variable right there. 111 00:07:28,570 --> 00:07:34,990 Hundred percent is being printed out inside of my j x block and it definitely without a doubt has a 112 00:07:34,990 --> 00:07:36,310 value of 20. 113 00:07:36,400 --> 00:07:43,520 But according to the set interval and the console log right there the value of counter is still 0 so 114 00:07:43,520 --> 00:07:50,340 something is really strange here Something just does not make sense in the least this artifact right 115 00:07:50,340 --> 00:07:55,770 here this kind of interesting kind of bug looking thing is the same issue that we have inside of our 116 00:07:55,770 --> 00:07:59,370 component back over here or inside of our hook of use location. 117 00:07:59,370 --> 00:08:02,400 We've got a very similar issue going on. 118 00:08:02,400 --> 00:08:08,970 So if we can understand in this a very small example why this is occurring it might help us fix up this 119 00:08:08,970 --> 00:08:12,740 used location hook as well and get it to behave as expected. 120 00:08:12,780 --> 00:08:14,150 So let's take a quick pause right here. 121 00:08:14,160 --> 00:08:19,050 When we come back the next video we're going to really examine this little example and understand how 122 00:08:19,050 --> 00:08:24,570 we can have one count of value right here one counter value on the screen and a different counter value 123 00:08:24,570 --> 00:08:29,300 being console logged over there as well so quick pause and we'll figure this out in just a moment.