React Lazy Loading | Infinite Scrolling With React | Ashutosh Hathidara

hi guys i am ashutosh and welcome to devsense in this video we are going to understand what is lazy loading and how to implement that in react so lazy loading is a type of a technique that web developers use to improve the performance of the website so you might have seen on every social media facebook instagram linkedin that whenever you open the website you only see some number of posts but whenever you scroll down facebook or instagram loads the content dynamically so it doesn't fetch all the data at one time instead it only uh fetched the data on demand so this is called as lazy loading and all the web developers use it to build some kind of social media application or e-commerce website and that is why it is very famous and important it also improves the performance of your website because you are minimizing the number of network calls per second for this website and in this video we are going to create this exact replica project that you are looking at so without wasting time let's get started so initially you can see that i have a website with all the image cards loaded but right now you can see that no lazy loading is applied no fancy things are happening as of now and if i if i show you the code code is pretty simple so my app.js file uh in react contains only one component that is post so this post iteratively renders all these image cards which are nothing but just unsplash images and these are like the owner names of the respective images you can also see that there is a one commented component which is loading pose so if i comment out this pose and if i uncomment this one you can see that it is nothing but the animation cards which we will use while displaying lazy loading so when we will load the new fetch data during the fetching time we will display this loading animation on scroll so as of now we can just put it on comment and we can uncomment this one let me show you the structure of the code as we already know we have a typical react structure where i have also installed tailwind which is used for css rendering or to use css as inline i will not go into detail on how i have designed these cards you can take a look at the code i've given the github repository link in the description box below if i open this src folder you can see that we have these many files so app.js we have just looked at it index.js is the default index.js that react provides i've added three or four more files one is card.js which has code corresponding to each of these cards we have data.json so data.json contains all the image data that you are seeing on the this website so all the image urls and as well as their owner name so data.json contains that and loading post contains the loading animation of the pos postcard and posts.js contains just it it will just iterate over the data that we have in data.json and it will render the card for each of the image so it's as simple as that so as of now we only have these things and we want to apply lazy loading over it you might have also seen one more file which is used lazyload.js so this is custom react hook that i've written which we can use for any kind of lazy loading process so to make this video more simpler we won't go over in detail of how i have written this used lazyload.js you can copy this entire file and paste it into your project wherever you want to use it this is a very general file and you can use it in any kind of lazy loading with any kind of data so you can see that in use lazy load dot js we have a custom hook created as used lazy load it takes three arguments one is trigger reference another is on grab data and third one is options so how lazy loading works is let's say if we look at the website this is one page so one page contains six image cards so on the loading of the website we will only fetch one page it means we will only fetch these six images we won't fetch the other images so we will put the one element at the end of each page so whenever user scrolls down user will interact with that particular element and the trigger will get created for this custom hook and what it will do is it will grab a new data for a new page which means new six elements and it will display it on this screen so that is what the these these three elements does so trigger graph is a reference to the object which we will put at the end of the page on grab data is the function which will create with which the user can fetch new data based on the page number for which the data needs to be fetched an option is a optional argument that we can keep playing so we will use this custom hook use lazy load to implement lazy loading we will only work with post.js because we want to lazy load these posts so we do not need to work on any other file in this project we can only work on post.js and we can improve that so as of now let us say that we our post will be rendered here so this div element will render one page posts it means it will display six images and we want to keep one element at the bottom of this page which will trigger an event to lazy load a new data so this is that new element now we need to create a reference for this new div that we have created we can do that using ref and we can pass the reference so to create a reference we can create it using constant we can name it as trigger ref and we can use use ref pre-built hook of react and if we are using it we also need to import it use ref from react so we got a warning that we have not passed anything so we will pass trigger ref here and the warning will go away so we have implemented a trigger for this development now class so we only want to display this div element whenever user scrolls down so what we can do here is there is a there is a package called clsx which dynamically generates classes as we want from the conditions so if you want to know about clsx i have given the package link in the description box below you can read more about that so what we will do is we we are going to call clsx and we are going to define the name of the class which will trigger the new data fetching it is trigger and we will define the condition as as visible and for visible we need to give a value let's say true or false in the beginning let me give false but here instead of putting false or hard coding it as false we will put a variable which will change itself from the custom hook that we created so but as of now we are keeping it as false we also need to import clsx okay it imported itself so we don't need to worry about that now let us import the custom hook that i created that is called use lazy load from the file use lazy load so we have imported the custom hook we also want to import the loading animation com component that we have created it is called loading posts and we have to import it from loading post we also need to define a variable called number of images we want to display per page so per page we want to display six images one more thing that if you look at data.json we have 18 images 1 8 18 images we have so the total number of pages we have are three so what we are going to do is we only have three page of images but we will wrap over the images and we will create a infinite scrolling effect if you remember i told you that our custom hook used lazy load takes three arguments one is trigger ref that we have already created another is on grab data so let us create on-graph data which will fetch the data on demand so for that i'll create a es6 method on grab data which will pass a current page number so for which page we want to fetch the data and we will create a promise which will fetch the data i am defining a new variable called data2 is equals to and i am going to slice the data variable that i have initially slicing means i'll just split the array and only i'll only take those six elements that i want and i'm going to make current page minor minus one modulo total pages multiplied by number per page and for the second argument i'll just say number per page multiplied by current page number modulo so we are going to take only those pages which are belonging to that particular page number that is current page so this is the new data that we have got we can pass this data to resolve function of promise and we know that this data which we are using is available locally but usually in when we are working with real-time data we don't have data present locally so to get that kind of lazy loading fee we are also implement set timeout we will define a custom timeout function which will impose a delay to render the data so i am giving the timeout as 1000 millisecond it means one second and this is on grab data function is done now let us also create an instance of used lazy load custom hook that we want to use so the custom hook will return two things one is lazy images it means whatever images that we want to display it will return that and it will also return an object loading which will contain a boolean value true or false representing whether this loading animation should be visible or not so instead of putting false here we will put loading and here we will create object use lazy load and we will pass two elements one is trigger ref and another is on grab data so this is our code now instead of iterating over data which is original array containing all the post we will use this lazy images here uh once you do that uh it should show but it's not showing so let's find there okay so the error is we can't name it as we want because this used lazy load returns the first element always as data and the second element always is loading so we have to name this data itself but the problem with us is we also have data here so we can't name the same things so name the original data which contains all the post as images and we also need to rename this here and that's it and i think we have to here instead of lazy images we have to put data and once we do that we will get the images here when we scroll it it will show the loading component and after that it will show the images it will it is fetching the images whenever we are requesting for it or if whenever user is interacting with the this loading post component and not otherwise and you can see that this is infinite scroll so it is wrapping around so we only have 18 images but you you can see after all 18 images are over it starts from the beginning so you can implement this on grab data function for your own data set data as well and this use lazy load hook you can reuse for any kind of data so this is how you can create your own lazy loading animation and you can use it anywhere in your project and this is also you can use it in any production ready project because this is very light and optimized custom hook i hope you have found this video very useful and you will use that in your own project if you find it useful please like this video comment down what you would like to watch the next and please subscribe to this channel i'll be back with another video very soon till then stay safe

Channel: Dev Sense

Views: 37,954

Keywords: react, react js, javascript, lazy loading, lazy load, lazy loading react, infinite scrolling, infinite scroll, infinite scrolling react, infinite scrolling js, infinite scroll react, infinite scroll js, infinite scroll javascript, infinite scrolling javascript, infinite scrolling with react, infinite scroll tutorial, infinite scroll react tutorial, react tutorial, intersection observer, intersection observer tutorial, intersection observer react, intersection observer api

Id: 9YhlGTC87tw

Length: 12min 55sec (775 seconds)

Published: Tue Jan 11 2022