React Infinite Scroll like YouTube, Instagram | with Animation

let's talk about infinite scrolling in react and how to implement that in the easiest way so here i create one simple application of hundred crypto coins and their price this data is coming from coin get go api which is free you can also use this link for practice so here in the app component i create one use effect and inside it we are fetching data using xcos in your case it must be your api after that i store this data in state variable and then pass this current data to this cryptolist component so let's see this now using the map method we will pass this data into this cryptocard component this card will display image name and price so we get this simple application now in this application we are fetching data of 100 crypto coins in a single request but when we are working on real-world applications we can't do that because it's make our website slow and users don't like slow websites so nowadays some social media apps like instagram youtube they introduce a new feature to display data which is infinite scrolling so when we scroll down the page and reach to the bottom then they will show us the next post for example in our application first we display only 12 cards and when the user reach to the bottom then we show the next 12 cards so at a time we need to fetch only 12 details which will make our website almost 10 times faster than before and it's also used to hook user attention so first pass here page equals to 12. now let's create one state variable called page and pass 1 as an initial value now pass this page variable at the place of this page number and add a page in use effect dependency now save the changes and take a look see we get only 12 cards now when we reach the bottom then we increase the page number by 1 and we will get another 12 post so i create another use effect for add event listener arrow function and pass empty array for dependency because we want to declare it only one time so write window dot add event listener now pass first parameter scroll and the second parameter is the function which we will call on scroll event now let's declare this function handle scroll and inside it we write our logic so in javascript we have couple of elements for getting the data of dom and window so first we console document dot document element dot scroll height which returns the height of our html element save the changes and take a look scroll the page and see we get height of our application now let's console document dot document element dot scroll top which returns the pixel value of scroll vertically of our html element save it and see when we scroll up it prints the value of scroll from top see it's increasing according to our scroll now last we want only this window height so we console window dot inner height which is the height of our window save it and take a look see we get all values now when we scroll down to the bottom our window value plus top value will equal to this height value if we scroll up then it's not equal to this height value so we write if window dot inner height plus document plus document element dot scroll top plus one greater or equal to document dot document element scroll height and if it's true then we increase the page value by 1. here we add 1 pixel so it will greater than scroll height because in some browsers this sum will not equal to scroll height so don't forget to add this one now write set page and here we pass previous arrow function and previous plus one don't write page plus one it will not give us results we want save the changes and take a look see we get the new data on scrolling but it overwrites old data so let's fix this so in use effect here we write previous arrow and wrap this with array and at the front we are using spread operator for adding all previous values and here also we add spread operator save the changes and take a look see it's working smooth now let's add a cleanup function for this event listener so we write return arrow function and write window dot remove event listener scroll and handle scroll i explained about cleanup function in my use effect tutorial now in addition we can add scrolling animation at the bottom so users can see there is more content so let's create a state variable called login and pass the initial value true now let's remove these three lines we don't need them and inside this if condition we write set loading true because it's the beginning of patching new data and after we store new data set loading to false now i have one loading animation in loader component so let's import loader from components slash loader and let's add here save the changes and take a look see we get this simple animation you can also get this animation just check my this tutorial now i move this loader to the bottom and add condition if loading is true then display loader save the changes and take a look can you see just for a second we get animation so i hope you understand the concept of infinite scrolling if you have some doubts you can ask me in comment section or on my instagram account so see you in the next tutorial goodbye

Channel: Code Bless You

Views: 17,767

Keywords: code bless you, react pagination, lazy loading, react infinite scroll, infinite scroll react, infinite scroll, endless scroll react, react unlimited scroll, infinite scroll tutorial, react infinite scrolling, endless scrolling react, infinite scroll react tutorial, react infinite scroll component, react infinite scroll functional component, infinite scrolling with react, infinite scrolling, reactjs infinite scroll, infinite scroll reactjs, react, react infinite, react js

Id: ahpbfQybX94

Length: 7min 0sec (420 seconds)

Published: Mon Aug 08 2022