#16 React Js Challenge Day 16 | Infinite Scroll in React Js

so hey guys welcome back to my YouTube channel and this is going to be the 16th challenge in 30 days of react JavaScript so here you can see we have the problem statement which is develop a react component that demonstrate the infinite scroll feature so those who don't know about infinite scroll feature you can navigate to YouTube and currently YouTube is one of the application which uses infinite scroll so whenever you scroll down and when you reach at the bottom you will see a loading bar and then the new data will get refreshed so this is something which always happen when you scroll down to the web page so most of the application uses infinite scroll feature it is most like a load mode button when you click on the load mode button then the mode data will get fetched so that is something you can use so if you're new to my channel make sure that you like and subscribe my channel so that you don't miss the awesome videos so let's get started first of all we will create a react arof functional component and Export then we will create two State one is for managing the state and then one is for the patching the API call so the user effect now we will create one state which is data Final state will be set data and initially it will be an empty array now we will make one use effect inside use effect we will create one function or you can say we will call one function which is fetch data so we will Define this F data function which is basically a asynchronous function inside it we will write try and catch so inside try and catch we will write const response is equals to A wait patch the URL and you can navigate to json. placeholder typ cob.com and when you will scroll down you will see the post end point and when you click on the post one the API will get hit and you will get hundreds of post with the title and the body so I will copy this end point pass it here I will write const incoming data is equals to await response. Json now I will update the final state to set data to incoming data okay and I will create one another state for the loading state so when the API is in pending State we will show the loading status so these things enhance the user experience of the component as well as the wave application also so I will update the set loading to true and after that when the API response will get completed set loading will become false same in the error also set loading will become false then we will show our error if the API response will fail then error do message now we will modify our HTML we will write section dot Landing inside we WR div do row do container make one H1 and inside H1 I will write infinite scroll I will give a class name to Landing heading then I will write data and then data. map so we have to map our data so I will extract item now I will write a div I will pass a key item. ID I will write S3 do heading and and inside S3 we will show our title with item do title okay and now so here we will show our loading text so we will write loading if true then so this paragraph inside this paragraph I will write one text loading I will give a class name of loading so by doing this uh you will see when I will navigate to my server which is Local Host SL infinite scroll you will see total hundreds of data here okay so we have to implement our infinite scroll feature so for that we will create one function which is handle scroll and we will pass this function into use effect with window. add event listener of JavaScript so I will write const scroll talk client height and a scroll height these three are responsible for the infinite scroll feature document dot document element we will create one if a statement inside it we will write a scroll top plus client height is greater than equals to a scroll height minus 10 and and is not equals to loading then only what it will does first it will set the set loading to true then it will refresh the whole data so with the help of uh basically we have to make one state state for that so we will write use State we will make one state which is set page and inside it we will write one now here we will update the state set page from previous to previous + one it will increment the page from plus one and I will move this use effect after this handle scroll I will create one another use effect where I will pass this handle scroll so I will write window do add event listener event name scroll and the function name handle scroll so we have to remove this function also so window dot remove event listener scroll handle scroll so this will avoid the memory leak in react and now I have to modify this URL page go to Dollar page so in the dependency array we will pass the page and we'll update the set data to set data previous previous with the help of sped operator I will get all the previous data and all the incoming data so now after saving this file so you will see initially there is page is equals to one data and now when I will reach at the bottom of the page the page will become two and same a new data will get fed same again page will become three new data will get refreshed so this is something you can use you can use this part of code in any react application where you want infinite scroll feature and you can play this URL endpoint with any other URL endpoint which you want to play with it so that is something if you like this video make sure to like And subscribe and if you have any doubt let me know in the comment section until then thank you for [Music] [Applause] [Music] watching

Channel: DebugDriver

Views: 6,128

Keywords: react infinite scroll, infinite scroll react, infinite scroll in react, infinite scroll, react infinite scroll component, infinite scroll tutorial, infinite scroll in react js, infinite scrolling, infinite scroll react tutorial, infinite scrolling react, react infinite scrolling, infinite scrolling with react, infinite scroll react hooks, feature: infinite scroll in react, infinite scroll js, react, infinite scrolling in react js, react js infinite scroll, react projects

Id: R875l9cfR-g

Length: 8min 23sec (503 seconds)

Published: Sun Dec 10 2023