How to Create Infinite Scroll in React | TanStack React Query

In this video we are gonna learn how to create infinite scroll in react, we can use button "load more" to show more data, also we are gonna use "react-intersection-observer" to make it auto fetch when we scroll down.

👨‍💻Code:

🔗Source:

👋🏻

👉Timestamps:
0:00 - Intro
02:49 - Fetch data & styling
11:07 - Install Tanstack React Query
12:40 - How to use useInfiniteQuery
28:38 - How to use react-intersection-observer

🌎 Find Me Here:

#programming

[abdallahazme]

Your explanation was super smooth, smoother than infinite scrolling itself. Thank you so much, mate, for making this video.

[yamelamadorfernandez]

It serves the purpose very well, I came in not knowing about infinite scroll and went out knowing, that is enough for me. Thanks bro.

[gaganyt]

I watched a video about paginated queries in React Query three days ago. Since then, I've been trying to learn about infinite scrolling in React Query, but my search on YouTube didn't yield helpful results. I struggled to grasp the concept and even considered switching to another library. Now, coming across this video, it feels like god sent you to make a video about infinte scrolling to help me out.

[julienheng]

Your explanation is very clear and easy to follow through. Please continue to make more tutorials. Thank you very much!

[ahmedaq]

this is so clean .... thanks a lot for everything Cand

[mdkawsarislamyeasin]

Bro you save my huge time. I was looking for this.

[delovoy_mikhail]

братишка, дай бог тебе здоровья. В твоём видео всё что нужно. Внатуе красава!

[SergieArizandieta]

ty buddy u really help me, other videos has a too complicated code and with gross explanation to explain this subject, ty again I hope u continue with this kind of tutorials :, )

[cleverprogrammer]

Amazing Amazing I was looking many days thanks alot

[xtz_]

Yo thanks man 😂I was looking for this this morning hhhh and now I got it amazing videos keep going

[rlxnfli]

hello i'm korea developer student !! i've seen many many videos about introduce, your videos really good!!! I appreciate it... maybe i always watching your video everyday

[ahmedaq]

i've seen many videos for you, , they are always simple, direct and to the point... hopefully you will consider creating a TanStack tutorial where you go through it all in practical way (the same way you do).-- 🥰🥰🥰

[socialultra]

thanks dude, this really helped me out

[leevu]

Thank you so much! clear explaination sir

[FaizSultan]

thank you so much for deep explanation i was struggling with infinite scrolling in react query
i watched a lot of videos on youtube but your video is best ❤

[asifkabiremon]

This video content is really awesome and helpful to me

[zunnoorainrafi]

brother I have a question,
I used useInfiniteQuery in nextjs and I am fetching all blog posts in the function of useInfiniteQuery, as our data is coming from {data} = useInfiniteQuery({...}) and we can't use useInfiniteQuery in "server component" so I made my component a "client component" but I want that all my blog posts should be fetched in server component for less initial load content time and i also want infinite scroll on the main page of all blog posts. So how i can do this?

[letthesuntalk]

What if I'm using components with imgs and stuff like that, how can I mantain the performance when I scrolled and rendered a lot of items? Thank you :]

[divyprakash]

How is it possible to pass functions in use effect dependency

[Hunterhuni]

Hey, really nice video, I really appreciate it. Just one question: How would I achieve the same thing but in reverse order? Meaning the list starts from the bottom and whenever the user scrolls up more data is loaded?