React, Intersection Observer Tutorial

hey guys today you'll be learning the basics of how to use intersection observer in react and to learn that we'll just be going for this basic example of we scroll down and when this image goes into view the text changes to say that it's now visible and the way that intersection observer works is that essentially it allows you to track elements position in relation to another route element now currently by default and it's what we're using in this project the root element is the viewport so when enough of it has scrolled into the viewport that's when the text has changed and this is all configured by us but essentially the way that it's actually implemented it comes from a web api so it's not it's not built into javascript but it's added on top of javascript when it gets rendered into a browser through the v8 engine and that's the reason why it's available in react even though it wasn't really designed for react in mind it's just because react is obviously javascript based which is the reason why react has it and it's also the reason why it's kind of tricky to implement in react because it wasn't really designed with react in mind it was just designed in just general javascript of mine so therefore to actually use the api you kind of have to work around react's native architecture but that's fine i promise you that by the end of the video through this very basic example you understand how it works and then you can move on to more complex implementations of it like an infinite scrolling for example but we should just start off with a basic project like this just that you can master the basics okay so i've just installed a new react project using npm and i'm just going to type in code dot in the root directory to launch up my source code editor of choice which is vs code obviously you can use what you want and then actually you're scrolling of it sorry we'll zoom in so you can actually see this and then you know we don't need this so we'll delete a lot this stuff because we don't need it index okay we'll keep that but you can we don't need any of this and then we'll need to make sure that we don't get any errors so we'll move to stuff that you don't need let's place this for now saying you know so we've got some dummy content and then we'll say npm and start which is a script react script start the local server i'm also delete what's that it will actually also delete this because we don't need it afterwards here the the app styling sheet i have to delete it there as well so we don't get an error and then yeah hopefully we shouldn't have any errors refresh as you can see this is what we have okay the first thing that we'll do in our app is we will import use date so that we have so that we can dynamically render content we're importing a lot more than this later on but for now we'll just import this and again this isn't a fully fledged out react application so things are going to be pretty basic all our styling is just going to be in this one single uh functional component functional components because that's the modern way of making react application but obviously you know if you know what you're doing then it shouldn't be too hard to adapt this into class components but what we'll do is we'll say const is visible and then set is visible equals you stay false i'll be false by default but then if the image scrolls into view then we'll set it to true and then inside we'll say a if is visible if it's false please turn it upright hooks member has to be expression say not in viewport if it's false but then if it's not false so if it's true then we'll say in v port like so so you know that makes sense obviously at the moment it will say so we'll just refresh you know what's going on yeah so you're saying not in viewpot at the moment because obviously it's set to false and then below that we'll have a div [Music] and that's just going to be a gap so you have some space in between the header and the image and as for the image whoops alt oh we don't really need alt to be honest because it's not even [Music] it's not even a real application but whatever you know we'll just get um an image from our desktop we'll create a new folder here img and then inside you know we'll just get this image which i've already got let's put it there and then you know you can say source img because that was the folder name and then we'll say mo binoculars.jpg because that was a name and then you know we'll start everything in index.css because again it's not really it's not a fully fledged react application so we'll just style everything in here real quick [Music] so what it's going to be it's going to be position fixed and then the top and the left is there so that it's actually at the top and then it's all the way towards the left so you want it to span all the widths so we do width 100 percent and then after that we display flex because we want to center the texting sign and it will be centered both horizontally and vertically like so and we'll set the height to be 100 pixels as well whilst at it and then we'll do gap and that will just be height 100 being height and it's already because it's a div it's already um 100 the width and then we'll target the image like so alt it's alt words simpsons mo we're not killers margin is there all time to make sure this works i need to redisplay block and i believe that display inline images are by default height auto to make it proportionate max width to make things responsive so it can't be no bigger than 900 pixels but then it can't be any smaller than 95 percent so now i don't know what that was oh yeah one more thing actually we need to to set some colors which i've got to do some reason this one text value is 6495 ef and that's a blue color kind of and then as for the body [Music] that will be 2 8 2 3 5 and then yeah this is what we had at the very start and then as you can see you know and it's working now because it's not smaller than 95 and scales proportionately obviously you know this isn't really this isn't a styling tutorial but you know you get the idea we don't need that anymore okay what we'll now do is we'll not import the use ref hook because we need to create a reference to the element the single element that we want to observe and it's going to be that image because remember you want to change this text here when it is visible so we'll say we'll create the reference first and foremost [Music] call it target ref and then it won't have a value but then it will be initialized to hold this image element so we'll say target ref and then what we'll need to do is we will need to create the callback function that will be used on this insta by this intersection observer when we create it keep in mind this isn't the intersection observer it takes in two arguments and this is one of them the other one is the options which we'll create next and it takes in an art a single argument and this is going to be the an array of all the elements that is observing now our intersection observer is going to be observing one element and that's our image so what we can do is the array will only have one entry in it because we're only going to be observing one element so we can simply extract that single element from the array using a radius structuring and in case this confuses you basically that is the same as this just extracting the first argument and then what we'll do is we'll say set is visible so we use that use state method to change the value of that state boolean and then we'll say entry thing that we extracted into secting and every uh item in this array which comes from the argument it has that property on it and that property holds a billion and that billion the value of that billion will be based on whether it's currently visible in our root elements or not and our root elements will be configured in a second it will be configured to be the browser and again this will be the options that will be the second argument of the instruction observer so we set the route to be no and what that means is it would just use the viewport it would just default to using the viewport and then we'll set roots margin well we don't want it to be any wider than the element itself so we set zero pixels and then the third property that it takes in is threshold and we'll set that to be 0.3 and what that means is essentially one means that the elephant the element has to be completely in the viewport in order for this property to return true a threshold of zero means that yeah only the top literally only like the top pixels have to be visible in the viewport in order for this boolean to be true um and what we'll now do actually is we will say import use memo and the reason being is because this is going to be this options is going to be a argument in the use effect hook which you're about to create and that means that on each uh revender basically if we have an object then because objects are referenced again i can't explain this at the moment because i do expect you to know basic stuff like reference types if you don't then you need to look that up on your own but essentially because it we it because it re-renders um essentially pointing to a different place of memory so it thinks that it's a different object even even though it might hold the same values so we'll use this used member hook to say that we don't want this to change on the render cycles we want it to use the same memory location so we'll just say we'll return it there and then as for the second argument we'll just have it like that so this one this will never actually be rendered because if we did put in items here then it will render if the value of whatever item we put in into this array change but because you don't pretend anything it won't actually change it will just be initialized on component render on first component render and then from that it will never change and then yeah again i hope that i explained it to you but if not then you'll need to lock up user memo these memory hook on your own and then yeah as you saw we'll import the use effect hook because we'll now you will use it to create the intersection observer inside and then we'll say const observer equals new insert section observer and then the first argument as i said before will be the callback function the second with options and then what when i'll do is we'll say cons current target we'll get what extract the elements image elements from the target ref like so and then if current target that's initialized then we'll say observer dot observe and then current target so yes only so if this is initialized with the image element then we want to observe it using the intersection observer and remember that's the only element that it's going to be observing and then below this will return a function and then we'll say so what this is is a cleanup function again i can't go into i can't explain this in full detail but essentially it runs before every use effect talk after the very first use effect uh after the very first time that these effect hook is called um so if it runs for the second time then this cleanup function will run before the second time before the actual code inside the fuse effect hook and every subsequent time after the second time as well so what we'll do is we don't really need to do this actually because now this current target never gets unrendered but we'll just do it just to prevent errors you know in case that you are dynamically observing elements which disappear and then you know reappear on your page and etc well our application isn't designed like that but we'll just do that anyway just for um you know to prevent errors and then inside you want this use effect hook to be to render every time the target ref changes all the options in our case the options will never change and target ref neither that would never change either actually because again it never gets under innovative and disappears etc but yes as soon as application is launched then this will be run but i don't think but then this this image won't uh be rendered and then it will be rendered and then target ref will be assigned a value this image element and then because target left has now been assigned a value this will run again and then now it will be observed because it now holds a value our reference and then yeah that's it for too much because it never disappears after that so now it should be working so yeah so that's it pretty much what one i'll do though again i know this video is kind of long which gives my explanations but what i'll do is we will extract this out to a custom hook so that um you know you've got you get a better idea of how this works so it's better for abstraction so we'll say use element on screen dot js and inside we'll just copy these real quick and then we'll say const use element on screen options target ref it will take in those two arguments so which element we want to be observing with this custom hook and what other options for the observer contained inside this custom hook and then we'll just copy pretty much a lot of this but not yeah sorry actually copy the state as well so ctrl x we'll copy all of that other than the reference you want copy the reference and then what we'll do is we'll say return we'll change this actually we'll say options memo and then we'll return to options that's just going to be an object and then we need to pass it in here now and then because of that we need to change these and i'll press ctrl i use ctrl d to target the other element and target ref well that's fine that doesn't need to change what does need to change though is we'll say yeah we'll say return [Music] is visible and then we'll say export default use element on screen and with that we'll we now no longer need this and then we'll import use element on screen and because it's default you know you can just impose like that no curly braces and then we'll say const it's visible see we're getting now there because it no longer exists but we'll say use element on screen and inside we will use the same options that we used before so root null rate margin 0 pixels threshold 0.3 and then finally target ref second argument and yes it pretty much and then hopefully yeah it's working as before as you can see it's a lot better abstracted now so we don't have that cluster of code just in this uh isolated in this single component and yeah that's it for this tutorial i hope you understood my explanations again i'll post a link in the description to where you can understand more about uh used memo and the user effect cleanup hooks in case you didn't understand my explanations and i hope you learned from this tutorial and i hope you have a great day peace out

Channel: Qixotl LFC

Views: 1,190

Rating: 4.8974357 out of 5

Keywords: How to use intersection observer in React, React intersection observer tutorial, Intersection Observer in react, react using intersection observer tutorial, uses for intersection observer in react, tutorial for the intersection observer API in react, Intersection observer React implementation, MDN Docs intersection observer, Intersection observer react documentation, Intersection observer hook in react, intersection observer hook tutorial, react hook intersection observer

Id: wkztoWlwTXU

Length: 18min 43sec (1123 seconds)

Published: Mon Jul 05 2021