Infinite Scroll and Infinite Query work together in modern web apps. This tutorial gives two examples showing how you can add infinite scroll and infinite query to your React apps. The first example uses built-in React hooks and the second example uses React Query and its built-in useInfiniteQuery hook. This tutorial is intermediate to advanced level. If you are just starting with React, I recommend going to my React for Beginners full course first: ua-cam.com/video/RVFAyFWO4go/v-deo.html
I know it's an older video, but I was having heck of time finding tutorials that showed referencing children to observe. After some tinkering, this video saved the day. Thanks a lot!
Awesome tutorial, I do have a few question though: 1. Why did you create an axios instance instead of using axios directly into usePost.js? 2. Why did you use useCallback for the intersection obsever instead of useEffect and two useRefs (for observer and lastPost)? Does useCallback improve performance in this case? And how? 3. Why do we need to abort the http request (using the AbortController) when unmounting the usePost hook?
Thanks Dave , I was a bit lost when I saw the variable "lastPostRef", thought the arrow function assigned to it return a ref, obviously not . But I later found out that the arrow function is actually a memorised function(callback) that is passed and invoked by the DOM element "" ,so the DOM element () passing its ref as argument to the callback, so the callback adds the ref to the observer.
Your videos are always very sightful, weldone Although I got lost while at the point of creating the useCallback function (probably because this is my first time using it) but I was able to understand majority of what you were doing and also implement it to fit my own project. Great Job
Decent video until you get to the infinite scroll implementation. Then it's a code fiesta. You don't explain what any of thr hooks or components are used for. Just "paste these lines of code here.... and OK perfect" lmaoo
Thanks Dave, now I know the React.forwardRef can be conditionally forwarding ref. I thought I need to create two seperate component, one with forwardRef one without ref.
Greetings my tutor, I'm done with your HTML course. Currently on the CSS Tutorials vid. On the color section. Really grabbing it easily. I'm so grateful. How wish I could contact u personally. Would have been so happy. Keep the good work on SIR
Is there a way that react-query unfetches posts that pass a specific query? Say you have 1-100 posts. When it fetches the posts from 50-100, can react-query unset the 1-49 posts until you scroll back to them? Other than that, this was a great tutorial to implement. Awesome content!
You could write code that would invalidate the previously cached results. I haven't needed to do that. You might consider using pagination for this instead of infinite scroll - and that would limit your display to 50 results at a time if you choose: ua-cam.com/video/9ZbdwL5NSuQ/v-deo.html
@@DaveGrayTeachesCode reason I ask is because the implementation is for a mobile app, and I don't want to overload the interface with a long list. I would use pagination for the desktop version, but on a smartphone, I would like to avoid the typical pagination implementation because its lowers user experience.
Your tutorials are gold Dave, thank you! Would you consider tackling React front end search and filtering using Axios/API? A complement to the pagination/infinite scroll series possibly?
As always Dave ... great Content Can You Please Make More Videos About React Query With Redux Toolkit? As Redux Person I didn't Find Enough Videos Covering these Ideas On UA-cam And YOU ARE THE BEST IN THIS THINGS
I feel that the custom hook method are much easier to understand. I tried to do the same thing with RTK Query as we use redux in our project. the problem is for page 2, it returns the data for page 2 only, there is no place to put extra logic to do [...prev, ...data].
The 2nd approach is great if you have 1 page to show posts. But what if you have few different pages e.g. feed, bookmark, user posts etc, where the queryFn will be different. So in that case what will be the best approach? Shall we write useInfiniteQuery and useCallback code in each file or use custom hook for the observer part?
Man I am waiting for some full stack build from your side ,please consider it man,how are u hope u r healthy and fine ,I am always waiting videos ...need some advance react series if u can....my most of friend are employed beacuse of u and i was increasing my knowledge
@@DaveGrayTeachesCode In India we don't have teacher like you, all are mostly money minded ,we can't afford to pay ,U deserve everything in your life ,love from India and from my friends
as always clear and concise , i just have tiny question i would appreciate some explanation if possible, at 14:52 you said the last element we get is results.length+1 why did we add 1 to it isn't results.length the last element i know it might seems stupid question but i hope i get some help for it and btw thank you for the useAxios video it helped me a lot .
its becuase array.length gives the size of the array, but in map(item, index) the index starts from 0, so for the last element, index+1 gives the length of the array
Hi Dave, I have a few questions. To access intersection observer in react, we must use useRef? Also, we didn’t use useRef hook on lastPostRef (we used useCallback) but we can still pass it to our component as a ref. I am a little bit confused about this part). I have a small follow-up question) I just noticed, that every single time I safe changes in vs code, I got new response in network tab. But since I am working with external api, which limits the amount of fetching you can have, it can quickly kill your limit. Did you experience something similar before and if yes, what did you do to fix this
Q: To access intersection observer in react, we must use useRef? A: It is a good way to do it. It might not be the *only* way to do it. Q: Confused about passing the callback as a ref... A: This is the function that intersectionObserver will call. Q: Can you stop new network requests when saving changes? A: In this tutorial, we are working with React Query. If your component calls a hook that requests data, then it will do that every time. To avoid reaching a request limit with an API, you could development with a mock API like JSON-Server.
It's not built-in like it is in React Query, but I think you could as long as the API provides paginated data. RTK Query supports tags for each query, so you could track each page like that. I'd need to work through it to confirm everything.
@@DaveGrayTeachesCodethanks dave i have already seen those videos and learned mongodb from there but what i meant by question how should query the data should limit or skip certain docs for react query infinite query. Thanks for replying
Hi Dave,qucik question now we have RTK Query and React query ,So can you tell us Can we do the same thing(pagination and Infinite scroll) etc with RTK Query ,Since RTK Query getting popular can we replace react Query with RTK Query...Let me know your thoughts, and can you create these examples with RTK Query
I think you could do the same with RTK Query, but it does not have built-in support for it as React Query does. You would follow a pattern more like my first example and you could query RTK Query with page numbers. You could supply the page numbers as tags where RTKQ track the query cache, too.
Hey I have a coding problem in mind I'm a noob just can't seem to figure it out like is it possible to create a function where we could enter month(like 1 for January, 2 for February) and and year as parameters to return the number of days in that month this also should include leap years . Like is it possible to code something like that without using getdate method.
It is possible to code something like that. I have not done so myself so I cannot guess about needing the getDate method or not. For dates, there are some popular libraries many use like moment and date-fns: www.npmjs.com/package/date-fns
Ok, nevermind my question, i found an explanation on this guy's video that clear explains it.. ua-cam.com/video/3yTs1NJZyBk/v-deo.html But anyway, thankx for this awesome tutorial about "infinite scroll" 😎👍
Github theme has several dark themes available. A recent update to VS Code changed many themes from their defaults though. I've heard it has impacted many themes. I hope they patch it!
This tutorial has all of those concepts, but it just shows a "Loading More Posts..." message instead of a gif. I think you would want a spinner or similar animation instead of a gif but either is possible.
True. It is not a beginner tutorial. This is intermediate to advanced. Not every tutorial I make is for beginners. Look for the word "beginner" somewhere in the description.
@karammm he could at least explain his decision for using certain hooks or why he implements it this way. Probably better off just downloading the code from github than following and trying to learn something (not much is explained)
This is good bro. Put this on one of my frontends, and not saying it got me the intern, but it did make my project look nicer. I start in 2 weeks. Stoked
Really great video, but I was wondering that... is it possible that if we scroll up we stop at next post... because if I scroll up with my mobile .... than it will scroll up very fast..... plz help me with that... thankyou
When applying this to a scroll up (for say messages), the ref element is in view every time it rerenders so its caught in a loop. ive tried making it scroll down on the rerender but everytime the page first loads, somehow the ref is in view? have you tried making this work for a scroll up? id love your input and/or tips. (this tutorial is amazing by the way, has helped immensely already within other areas of this webapp)
Excellent tutorial. I will definitely try this approach. I was trying to use it with SWR and the intersection obsever but had no luck achieving what i wanted.
Infinite Scroll and Infinite Query work together in modern web apps. This tutorial gives two examples showing how you can add infinite scroll and infinite query to your React apps. The first example uses built-in React hooks and the second example uses React Query and its built-in useInfiniteQuery hook. This tutorial is intermediate to advanced level. If you are just starting with React, I recommend going to my React for Beginners full course first: ua-cam.com/video/RVFAyFWO4go/v-deo.html
That thing in the end " A little progress everyday will get you very long way" So true.
I know it's an older video, but I was having heck of time finding tutorials that showed referencing children to observe. After some tinkering, this video saved the day. Thanks a lot!
Glad to hear that!
Awesome! It worked! Make sure "hasMore" condition is right before you proceed with intersection observer part
Awesome tutorial, I do have a few question though:
1. Why did you create an axios instance instead of using axios directly into usePost.js?
2. Why did you use useCallback for the intersection obsever instead of useEffect and two useRefs (for observer and lastPost)? Does useCallback improve performance in this case? And how?
3. Why do we need to abort the http request (using the AbortController) when unmounting the usePost hook?
Love all the modern content you are giving away🙏🏼. Appreciated 🇦🇺
You're welcome!
Thanks Dave , I was a bit lost when I saw the variable "lastPostRef", thought the arrow function assigned to it return a ref, obviously not .
But I later found out that the arrow function is actually a memorised function(callback) that is passed and invoked by the DOM element "" ,so the DOM element () passing its ref as argument to the callback, so the callback adds the ref to the observer.
Your videos are always very sightful, weldone
Although I got lost while at the point of creating the useCallback function (probably because this is my first time using it) but I was able to understand majority of what you were doing and also implement it to fit my own project. Great Job
Decent video until you get to the infinite scroll implementation. Then it's a code fiesta. You don't explain what any of thr hooks or components are used for. Just "paste these lines of code here.... and OK perfect" lmaoo
Brilliant example Dave, thank you 👍
Very welcome!
Good Job, Dave
Thank you, Romar!
I learned lot about React because of you. Thank you very much
Thanks Dave, now I know the React.forwardRef can be conditionally forwarding ref. I thought I need to create two seperate component, one with forwardRef one without ref.
Right on! 🚀
So good tutorial thank you, react query to build infinite scroll looks more easier than using react only
You're welcome, Sona! 🙏
Greetings my tutor, I'm done with your HTML course. Currently on the CSS Tutorials vid. On the color section. Really grabbing it easily. I'm so grateful. How wish I could contact u personally. Would have been so happy. Keep the good work on SIR
You're welcome and keep up the good work! You can join my Discord where others viewers and I both answer questions: discord.gg/neKghyefqh
Thank you Dave! Very usefull as usual)
Glad it was helpful!
Which theme you are using? Github?
Is there a way that react-query unfetches posts that pass a specific query? Say you have 1-100 posts. When it fetches the posts from 50-100, can react-query unset the 1-49 posts until you scroll back to them? Other than that, this was a great tutorial to implement. Awesome content!
You could write code that would invalidate the previously cached results. I haven't needed to do that. You might consider using pagination for this instead of infinite scroll - and that would limit your display to 50 results at a time if you choose: ua-cam.com/video/9ZbdwL5NSuQ/v-deo.html
@@DaveGrayTeachesCode reason I ask is because the implementation is for a mobile app, and I don't want to overload the interface with a long list. I would use pagination for the desktop version, but on a smartphone, I would like to avoid the typical pagination implementation because its lowers user experience.
Your tutorials are gold Dave, thank you! Would you consider tackling React front end search and filtering using Axios/API? A complement to the pagination/infinite scroll series possibly?
Thank you and great request! 💯
As always Dave ... great Content
Can You Please Make More Videos About React Query With Redux Toolkit?
As Redux Person I didn't Find Enough Videos Covering these Ideas On UA-cam And YOU ARE THE BEST IN THIS THINGS
Thank you! It would be unusual to use React Query with RTK.. but I do want to create more React Query content soon. 💯
Saved my day
if not scroll on body (use div with overflow scroll) how can i use react-query ? not loading next page when scroll on div
I feel that the custom hook method are much easier to understand. I tried to do the same thing with RTK Query as we use redux in our project. the problem is for page 2, it returns the data for page 2 only, there is no place to put extra logic to do [...prev, ...data].
how make scroll form bottom to top
The 2nd approach is great if you have 1 page to show posts. But what if you have few different pages e.g. feed, bookmark, user posts etc, where the queryFn will be different. So in that case what will be the best approach? Shall we write useInfiniteQuery and useCallback code in each file or use custom hook for the observer part?
This was amazing, just what the doctor ordered. Also never knew about controller.signal.aborted. Depended on CanceledError but now I will use that.
"UseQueries" please 🙏 , multiple fetching from a list of array thanksss
Man I am waiting for some full stack build from your side ,please consider it man,how are u hope u r healthy and fine ,I am always waiting videos ...need some advance react series if u can....my most of friend are employed beacuse of u and i was increasing my knowledge
He's a great tutor. I'm just beginning with he's vids and I'm currently on CSS NOW
Thank you!
I'm glad to hear I've helped your friends and you both! I'm working on a full stack MERN project to publish soon. 🚀
@@DaveGrayTeachesCode In India we don't have teacher like you, all are mostly money minded ,we can't afford to pay ,U deserve everything in your life ,love from India and from my friends
Just dont forgot the abort! it's very importante, the abort just get rid of the second request
as always clear and concise , i just have tiny question i would appreciate some explanation if possible, at 14:52 you said the last element we get is results.length+1 why did we add 1 to it isn't results.length the last element i know it might seems stupid question but i hope i get some help for it and btw thank you for the useAxios video it helped me a lot .
its becuase array.length gives the size of the array, but in map(item, index) the index starts from 0, so for the last element, index+1 gives the length of the array
thanks dave
You're welcome, Riansyah!
Hi Dave, I have a few questions. To access intersection observer in react, we must use useRef? Also, we didn’t use useRef hook on lastPostRef (we used useCallback) but we can still pass it to our component as a ref. I am a little bit confused about this part). I have a small follow-up question) I just noticed, that every single time I safe changes in vs code, I got new response in network tab. But since I am working with external api, which limits the amount of fetching you can have, it can quickly kill your limit. Did you experience something similar before and if yes, what did you do to fix this
Q: To access intersection observer in react, we must use useRef?
A: It is a good way to do it. It might not be the *only* way to do it.
Q: Confused about passing the callback as a ref...
A: This is the function that intersectionObserver will call.
Q: Can you stop new network requests when saving changes?
A: In this tutorial, we are working with React Query. If your component calls a hook that requests data, then it will do that every time. To avoid reaching a request limit with an API, you could development with a mock API like JSON-Server.
Amazing!
Thanks!
Nice
Thanks
Thanks for the tutorial Dave! btw, can we do infinite scroll with RTK Query?
It's not built-in like it is in React Query, but I think you could as long as the API provides paginated data. RTK Query supports tags for each query, so you could track each page like that. I'd need to work through it to confirm everything.
@@DaveGrayTeachesCode it would be cool if you make tutorial for pagination/infinite scroll using RTK Query!
Im using Mongodb as backed db how should I query and sent data to front?
My MongoDB videos: ua-cam.com/play/PL0Zuz27SZ-6OJQfjH8g_CAjgMbLoIleKN.html
@@DaveGrayTeachesCodethanks dave i have already seen those videos and learned mongodb from there but what i meant by question how should query the data should limit or skip certain docs for react query infinite query.
Thanks for replying
Please make on intersection in react i.e visible only when it is scroll with framer-motion animation
Nice request! 🚀
Hi Dave,qucik question now we have RTK Query and React query ,So can you tell us Can we do the same thing(pagination and Infinite scroll) etc with RTK Query ,Since RTK Query getting popular can we replace react Query with RTK Query...Let me know your thoughts, and can you create these examples with RTK Query
I think you could do the same with RTK Query, but it does not have built-in support for it as React Query does. You would follow a pattern more like my first example and you could query RTK Query with page numbers. You could supply the page numbers as tags where RTKQ track the query cache, too.
@@DaveGrayTeachesCode Appreciate your reply Dave,❤
Hey I have a coding problem in mind I'm a noob just can't seem to figure it out like is it possible to create a function where we could enter month(like 1 for January, 2 for February) and and year as parameters to return the number of days in that month this also should include leap years . Like is it possible to code something like that without using getdate method.
It is possible to code something like that. I have not done so myself so I cannot guess about needing the getDate method or not. For dates, there are some popular libraries many use like moment and date-fns: www.npmjs.com/package/date-fns
at 8:45, i had no idea what u just did .... kkkl, ... and whats a "AbortController()" ?
Ok, nevermind my question, i found an explanation on this guy's video that clear explains it.. ua-cam.com/video/3yTs1NJZyBk/v-deo.html But anyway, thankx for this awesome tutorial about "infinite scroll" 😎👍
It let's you abort (cancel) a request: developer.mozilla.org/en-US/docs/Web/API/AbortController and axios-http.com/docs/cancellation
wow ,awesome...........
Thank you, Dharmesh! 🙏
Which vscode theme you use ??
Github theme has several dark themes available. A recent update to VS Code changed many themes from their defaults though. I've heard it has impacted many themes. I hope they patch it!
First , great tutorial 👌👍
Thank you! Cheers!
How about when you scroll up to 10 then show loading.gif, do you have a tutorial for this?
This tutorial has all of those concepts, but it just shows a "Loading More Posts..." message instead of a gif. I think you would want a spinner or similar animation instead of a gif but either is possible.
Yes sir, do u have a tutorial for that?
No, just show an animation instead.
I dont know how to limit the fetch data when scrolling and to show spinner 🥺 btw thank you I will search it
@@markangelo4423 that happens in this very tutorial. I show you how to do that.
😍🔥
this tut is super beginner unfriendly. you take no time explaining why you do what you do. just reading out syntax isn't going to help anyone, Bro 👀
True. It is not a beginner tutorial. This is intermediate to advanced. Not every tutorial I make is for beginners. Look for the word "beginner" somewhere in the description.
It's not Dave's fault that you are a beginner. You are the only one not benefiting from this gold.
@karammm he could at least explain his decision for using certain hooks or why he implements it this way. Probably better off just downloading the code from github than following and trying to learn something (not much is explained)
how about using react infinite scroll component library?
I'm sure you can. There are usually several libraries that accomplish the same or similar goals.
This is good bro. Put this on one of my frontends, and not saying it got me the intern, but it did make my project look nicer. I start in 2 weeks. Stoked
Thanks is not enough but this is only I have right now. Its need some time to fully absorb for novice like me. Thank you.
You're welcome! 💯
Really great video, but I was wondering that... is it possible that if we scroll up we stop at next post... because if I scroll up with my mobile .... than it will scroll up very fast..... plz help me with that... thankyou
Look into the CSS scroll snap property: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
When applying this to a scroll up (for say messages), the ref element is in view every time it rerenders so its caught in a loop. ive tried making it scroll down on the rerender but everytime the page first loads, somehow the ref is in view? have you tried making this work for a scroll up? id love your input and/or tips. (this tutorial is amazing by the way, has helped immensely already within other areas of this webapp)
Glad it was helpful! I have not tried this for a scroll up. That may be another interesting topic to cover! 🚀
Excellent tutorial. I will definitely try this approach. I was trying to use it with SWR and the intersection obsever but had no luck achieving what i wanted.
Thank you! Yes, this should help! 💯
the best
OMG, I just need to implement an infinite scroll in my project and don't know how to do it. then you post this, hahaha, awesome! Thanks Dave!
You're welcome! Perfect timing! 🚀
Is there a way to apply this kind of thing using redux toolkit and redux saga
There surely is. React Query has this built-in which is nice!
Wow, i just use the ScroolView in react native.
Very good tutorial!
Thank you!
Nice video,
Unfortunately it reminds me of my to-do list, every time I reach the end it fills up again 😤
Thanks Dave
Ha! Thanks Ahmad! I agree - let's not apply infinite scroll to a todo list 😆
@@DaveGrayTeachesCode I agree 😁😎
this tutorial literally saved my life
Happy to help!
Thank you for yet amazing content ❤
You're welcome, Siddiq!