Awesome.
We have the scroll button.
Or now we would need to work on the functionality where it only shows up.
As we start scrolling down and the way we're gonna set this up since it is a side effect we're gonna
have to use the use effect hook which of course runs once the component mounts.
Now let's decide which component we would want to use.
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
be able to see that if we check out the next year that my road component is again my user context.
That's the reason why I'm going to set the use affect in the user context.
If you're adding more functionality probably it makes sense to create another context and use that as
a root component.
But in our case since we only have the alert and right now we're gonna have a scroll button.
I'm still going to use the user context why I would want to use the root component now because it's
the most easiest one moment.
The component mounts.
Then we can set up whatever functionality in our case we're going to be listening for the scroll event
and then we're good to go.
It just makes more sense.
Also at the end of this video I'm going to show you why it's important to have the return function from
the use effect.
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
going to look for the context.
Then we're going to look for a user I'm going to close my sidebar and I'm going to start by setting
up the state value.
This is gonna be height as well as set height.
So right after user and set user we're gonna have our state value.
And again we're going to use the use state.
So we already know the drill cost then we're looking for two values height height and set height set
height is obviously going to be my function height and I is coming from and then we go with react.
You state.
Just because I'm lazy to import the actual state home by itself and I'm gonna start off y 0.
So my initial value is gonna be 0 and then we're gonna set up our use effectively where we're gonna
go with react use affect.
Then we passing the callback function like so and then within the callback function we're going to listen
for our scroll event so we can do that by looking for a window.
That's the global object we have access to it.
Then we add event listener using of course the analogy analogies syntax and then we say all right.
So would like to listen for this scroll events and then we need to pass in the callback function.
So what I would like to do within the callback function while I have my set height correct.
So each and every time as I'm gonna be scrolling I would like to update this value.
So if initially it was 0 as the user starts scrolling you're going to see how we're gonna be updating
the height value and that way we're always always going to get the correct position on the page.
So we're gonna go at that height and the value we're gonna pass in here is gonna be the window property
page.
Why offset so go with window then page y offset.
So this is gonna give us a clue where we are on a page.
If you want of course you can just console log.
That way you're going to see exactly where we are on our page.
So we're gonna go with console log got window window and I'm going to go with Page y offset.
I want to save it.
And then if we inspect in a console of course I'm gonna be able to see as I keep scrolling.
Notice this is the value where I'm at on a page.
So currently I am at seven hundred and forty six pixels.
That's the value we're passing into height.
So once we have set this up of course we would need to return the height but we need to be careful every
time we setting up this side effects.
We also need to make sure that we clean up after ourselves.
Now what do I mean by this.
Well we have our use effect callback function and as I'm listening for the window went I also would
want to remove that event listener because imagine the scenario where I'm going to set this up on some
kind of component where I'm going to actually in month component.
Now in this case technically you can argue you can say well there's no time when we are actually mounting
the user complex component because it is a root component and you're correct technically in this case
we could even avoid using the remove of our listener.
But it just makes sense and it is a better practice if you always always clean up after yourself.
So I'm going to go with a return and the way it works we have to return a function and then within a
function we just need to set up what functionality we would want to clean up.
And in my case I'm going to go with a remove event listener that I need to say that I would want to
remove the scroll event and then here I'm just gonna pass in the empty function like so.
So once I do that then of course we clean up after themselves.
And then again like I said previously at the end of the video I'm going to show you where it would be
very important that we use this in this case you could technically get away with it by not passing.
And of course this function but I'm going to show you at the end of the video where it actually does
make a lot of sense using that.
Now I have my state value I have set height so I wouldn't want it passing firstly height.
So I'm going to pass in the height in my value prop and then in the scroll button Of course I have access
to it because remember we had the user context and of course the user contact wrap or project.
So now we have access to a height the way we do that we can just the IT WHERE I GO WITH height then
I'm going to set this equal to react then use context and then we just need to pass in our user context.
Now after a user has scrolled down our pixels our button is gonna show up.
If we're gonna head up then of course our button is gonna disappear.
In this case you can use whatever value you want.
This is arbitrary value if you'd want to set up around seven hundred six hundred whatever.
You can definitely do that.
In my case since I just wanted to show you how this is gonna work.
That's the reason why I set this up as hundred.
But in your case you can use wherever a valued one.
And lastly I just want to show you why it's so important to use the clean up function.
And in order to set this up I'm just gonna copy and paste everything that we have just so I don't have
the errors and I'm going to use the about page as my example I'm gonna head to about page.
We're gonna copy and paste and essentially we don't care about the height and set height.
We only are gonna care about our console logs.
So here I'm gonna say hello from about and then where we have the clean up function.
I'm going to first set up here.
The curly braces just so I don't get Yara hopefully that's gonna work or no.
Maybe that wasn't the right place.
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
curly braces.
Then I would want to return my window went but before I do that I would just want to of course set up
some kind of console lock just so we can see what is happening.
And in this case I'm going to say about on mounted on mounted like so.
And then if we are going to open up the console we're clearly going to see that if I refresh and if
the console is empty.
That is correct.
But then if we navigate through about page we have hello from belt.
And if we navigate away we have about a mountain.
Now what do you think is going to happen if I'm going to remove my clean up function.
With the that out.
I'm just going to come this out.
I'm going to save it and then again we navigate to about page awesome.
We have hello from about.
But then if we navigate away of course we don't run our cleanup function.
Then again we navigate back to about and in this case of course I already have to hello from Bob.
And what do you think is happening right now.
Well we're setting up the event listeners correct but we're not removing them.
So each and every time we're going to navigate about and then let's say navigate somewhere away we're
still gonna be listening for that initial scroll event that we send up in the first time.
And then if you keep doing that eventually you're just gonna have a memory.
That's why it's so important to use the clean up function as you're setting up your side effect within
the used effect.