1 00:00:00,480 --> 00:00:00,980 Awesome. 2 00:00:01,020 --> 00:00:02,510 We have the scroll button. 3 00:00:02,560 --> 00:00:07,110 Or now we would need to work on the functionality where it only shows up. 4 00:00:07,110 --> 00:00:13,250 As we start scrolling down and the way we're gonna set this up since it is a side effect we're gonna 5 00:00:13,260 --> 00:00:18,420 have to use the use effect hook which of course runs once the component mounts. 6 00:00:18,660 --> 00:00:21,520 Now let's decide which component we would want to use. 7 00:00:21,690 --> 00:00:26,840 And if I'm gonna head back to my project if I'm going to open up of course my file system then I'm gonna 8 00:00:26,850 --> 00:00:34,380 be able to see that if we check out the next year that my road component is again my user context. 9 00:00:34,740 --> 00:00:39,300 That's the reason why I'm going to set the use affect in the user context. 10 00:00:39,360 --> 00:00:45,480 If you're adding more functionality probably it makes sense to create another context and use that as 11 00:00:45,540 --> 00:00:46,620 a root component. 12 00:00:46,950 --> 00:00:51,810 But in our case since we only have the alert and right now we're gonna have a scroll button. 13 00:00:51,810 --> 00:00:57,270 I'm still going to use the user context why I would want to use the root component now because it's 14 00:00:57,270 --> 00:00:59,150 the most easiest one moment. 15 00:00:59,160 --> 00:01:00,330 The component mounts. 16 00:01:00,510 --> 00:01:04,850 Then we can set up whatever functionality in our case we're going to be listening for the scroll event 17 00:01:05,220 --> 00:01:06,850 and then we're good to go. 18 00:01:06,870 --> 00:01:08,110 It just makes more sense. 19 00:01:08,220 --> 00:01:13,290 Also at the end of this video I'm going to show you why it's important to have the return function from 20 00:01:13,290 --> 00:01:14,210 the use effect. 21 00:01:14,310 --> 00:01:19,410 If let's say we're going to set up in a different command so let's start step by step where first we're 22 00:01:19,410 --> 00:01:20,960 going to look for the context. 23 00:01:20,970 --> 00:01:25,590 Then we're going to look for a user I'm going to close my sidebar and I'm going to start by setting 24 00:01:25,590 --> 00:01:27,410 up the state value. 25 00:01:27,430 --> 00:01:30,330 This is gonna be height as well as set height. 26 00:01:30,750 --> 00:01:34,960 So right after user and set user we're gonna have our state value. 27 00:01:35,150 --> 00:01:37,330 And again we're going to use the use state. 28 00:01:37,500 --> 00:01:45,810 So we already know the drill cost then we're looking for two values height height and set height set 29 00:01:45,810 --> 00:01:53,200 height is obviously going to be my function height and I is coming from and then we go with react. 30 00:01:53,220 --> 00:01:54,030 You state. 31 00:01:54,030 --> 00:02:00,070 Just because I'm lazy to import the actual state home by itself and I'm gonna start off y 0. 32 00:02:00,090 --> 00:02:06,090 So my initial value is gonna be 0 and then we're gonna set up our use effectively where we're gonna 33 00:02:06,090 --> 00:02:09,540 go with react use affect. 34 00:02:09,660 --> 00:02:16,560 Then we passing the callback function like so and then within the callback function we're going to listen 35 00:02:16,560 --> 00:02:21,510 for our scroll event so we can do that by looking for a window. 36 00:02:21,540 --> 00:02:23,790 That's the global object we have access to it. 37 00:02:23,940 --> 00:02:29,760 Then we add event listener using of course the analogy analogies syntax and then we say all right. 38 00:02:29,760 --> 00:02:34,550 So would like to listen for this scroll events and then we need to pass in the callback function. 39 00:02:34,590 --> 00:02:39,660 So what I would like to do within the callback function while I have my set height correct. 40 00:02:39,690 --> 00:02:44,420 So each and every time as I'm gonna be scrolling I would like to update this value. 41 00:02:44,670 --> 00:02:49,980 So if initially it was 0 as the user starts scrolling you're going to see how we're gonna be updating 42 00:02:49,980 --> 00:02:55,620 the height value and that way we're always always going to get the correct position on the page. 43 00:02:55,740 --> 00:03:00,750 So we're gonna go at that height and the value we're gonna pass in here is gonna be the window property 44 00:03:00,750 --> 00:03:01,380 page. 45 00:03:01,410 --> 00:03:05,850 Why offset so go with window then page y offset. 46 00:03:05,850 --> 00:03:08,610 So this is gonna give us a clue where we are on a page. 47 00:03:08,610 --> 00:03:10,650 If you want of course you can just console log. 48 00:03:10,650 --> 00:03:13,800 That way you're going to see exactly where we are on our page. 49 00:03:13,800 --> 00:03:20,290 So we're gonna go with console log got window window and I'm going to go with Page y offset. 50 00:03:20,410 --> 00:03:21,180 I want to save it. 51 00:03:21,180 --> 00:03:26,300 And then if we inspect in a console of course I'm gonna be able to see as I keep scrolling. 52 00:03:26,310 --> 00:03:29,270 Notice this is the value where I'm at on a page. 53 00:03:29,330 --> 00:03:32,920 So currently I am at seven hundred and forty six pixels. 54 00:03:32,910 --> 00:03:34,710 That's the value we're passing into height. 55 00:03:35,100 --> 00:03:41,610 So once we have set this up of course we would need to return the height but we need to be careful every 56 00:03:41,610 --> 00:03:43,250 time we setting up this side effects. 57 00:03:43,260 --> 00:03:47,010 We also need to make sure that we clean up after ourselves. 58 00:03:47,010 --> 00:03:48,560 Now what do I mean by this. 59 00:03:48,570 --> 00:03:54,320 Well we have our use effect callback function and as I'm listening for the window went I also would 60 00:03:54,320 --> 00:04:00,030 want to remove that event listener because imagine the scenario where I'm going to set this up on some 61 00:04:00,030 --> 00:04:03,800 kind of component where I'm going to actually in month component. 62 00:04:03,870 --> 00:04:09,300 Now in this case technically you can argue you can say well there's no time when we are actually mounting 63 00:04:09,300 --> 00:04:15,360 the user complex component because it is a root component and you're correct technically in this case 64 00:04:15,720 --> 00:04:19,290 we could even avoid using the remove of our listener. 65 00:04:19,290 --> 00:04:24,910 But it just makes sense and it is a better practice if you always always clean up after yourself. 66 00:04:25,260 --> 00:04:30,900 So I'm going to go with a return and the way it works we have to return a function and then within a 67 00:04:30,900 --> 00:04:34,910 function we just need to set up what functionality we would want to clean up. 68 00:04:34,980 --> 00:04:40,500 And in my case I'm going to go with a remove event listener that I need to say that I would want to 69 00:04:40,500 --> 00:04:45,870 remove the scroll event and then here I'm just gonna pass in the empty function like so. 70 00:04:45,900 --> 00:04:49,580 So once I do that then of course we clean up after themselves. 71 00:04:49,740 --> 00:04:55,650 And then again like I said previously at the end of the video I'm going to show you where it would be 72 00:04:55,650 --> 00:05:01,350 very important that we use this in this case you could technically get away with it by not passing. 73 00:05:01,350 --> 00:05:06,240 And of course this function but I'm going to show you at the end of the video where it actually does 74 00:05:06,240 --> 00:05:07,990 make a lot of sense using that. 75 00:05:08,070 --> 00:05:13,430 Now I have my state value I have set height so I wouldn't want it passing firstly height. 76 00:05:13,940 --> 00:05:19,560 So I'm going to pass in the height in my value prop and then in the scroll button Of course I have access 77 00:05:19,560 --> 00:05:25,450 to it because remember we had the user context and of course the user contact wrap or project. 78 00:05:25,680 --> 00:05:32,520 So now we have access to a height the way we do that we can just the IT WHERE I GO WITH height then 79 00:05:32,520 --> 00:05:39,880 I'm going to set this equal to react then use context and then we just need to pass in our user context. 80 00:05:39,900 --> 00:05:43,800 Now after a user has scrolled down our pixels our button is gonna show up. 81 00:05:43,800 --> 00:05:48,280 If we're gonna head up then of course our button is gonna disappear. 82 00:05:48,450 --> 00:05:51,780 In this case you can use whatever value you want. 83 00:05:51,810 --> 00:05:56,750 This is arbitrary value if you'd want to set up around seven hundred six hundred whatever. 84 00:05:56,910 --> 00:05:58,080 You can definitely do that. 85 00:05:58,080 --> 00:06:01,220 In my case since I just wanted to show you how this is gonna work. 86 00:06:01,320 --> 00:06:04,020 That's the reason why I set this up as hundred. 87 00:06:04,200 --> 00:06:07,850 But in your case you can use wherever a valued one. 88 00:06:07,860 --> 00:06:13,540 And lastly I just want to show you why it's so important to use the clean up function. 89 00:06:13,710 --> 00:06:18,480 And in order to set this up I'm just gonna copy and paste everything that we have just so I don't have 90 00:06:18,480 --> 00:06:24,420 the errors and I'm going to use the about page as my example I'm gonna head to about page. 91 00:06:24,420 --> 00:06:28,900 We're gonna copy and paste and essentially we don't care about the height and set height. 92 00:06:28,980 --> 00:06:31,280 We only are gonna care about our console logs. 93 00:06:31,620 --> 00:06:37,630 So here I'm gonna say hello from about and then where we have the clean up function. 94 00:06:37,800 --> 00:06:39,710 I'm going to first set up here. 95 00:06:39,900 --> 00:06:45,720 The curly braces just so I don't get Yara hopefully that's gonna work or no. 96 00:06:45,910 --> 00:06:47,220 Maybe that wasn't the right place. 97 00:06:47,230 --> 00:06:53,260 So let me start up a new line and then let me set this up where I'm going to have here of course my 98 00:06:53,260 --> 00:06:54,480 curly braces. 99 00:06:54,520 --> 00:07:01,150 Then I would want to return my window went but before I do that I would just want to of course set up 100 00:07:01,150 --> 00:07:03,890 some kind of console lock just so we can see what is happening. 101 00:07:04,020 --> 00:07:10,640 And in this case I'm going to say about on mounted on mounted like so. 102 00:07:10,690 --> 00:07:16,810 And then if we are going to open up the console we're clearly going to see that if I refresh and if 103 00:07:16,810 --> 00:07:17,940 the console is empty. 104 00:07:18,010 --> 00:07:18,730 That is correct. 105 00:07:18,730 --> 00:07:22,900 But then if we navigate through about page we have hello from belt. 106 00:07:23,140 --> 00:07:27,050 And if we navigate away we have about a mountain. 107 00:07:27,100 --> 00:07:31,750 Now what do you think is going to happen if I'm going to remove my clean up function. 108 00:07:31,860 --> 00:07:32,770 With the that out. 109 00:07:32,770 --> 00:07:34,200 I'm just going to come this out. 110 00:07:34,340 --> 00:07:38,730 I'm going to save it and then again we navigate to about page awesome. 111 00:07:38,740 --> 00:07:40,270 We have hello from about. 112 00:07:40,270 --> 00:07:44,500 But then if we navigate away of course we don't run our cleanup function. 113 00:07:44,500 --> 00:07:49,890 Then again we navigate back to about and in this case of course I already have to hello from Bob. 114 00:07:50,260 --> 00:07:52,690 And what do you think is happening right now. 115 00:07:52,690 --> 00:07:56,980 Well we're setting up the event listeners correct but we're not removing them. 116 00:07:57,010 --> 00:08:01,840 So each and every time we're going to navigate about and then let's say navigate somewhere away we're 117 00:08:01,840 --> 00:08:06,850 still gonna be listening for that initial scroll event that we send up in the first time. 118 00:08:07,270 --> 00:08:10,930 And then if you keep doing that eventually you're just gonna have a memory. 119 00:08:11,230 --> 00:08:16,990 That's why it's so important to use the clean up function as you're setting up your side effect within 120 00:08:17,000 --> 00:08:17,820 the used effect.