Infinite scrolling in React using Intersection Observer

Implement infinite scrolling (pagination) in React using the Intersection Observer API.

👉🏼 Summary note on my site:

👉🏼 The Ultimate NextJs course

[pavanchalla]

Thanks hamed brother, really helpful, I was using the and stuck with give height & giving overflow scroll even then some of the content used to chop, now this approach is working without as css overflow-scroll

[visheshgarg]

Damn. You are simply awesome. Keep doing the great work

[datfeela]

thanks Hamed, the way you explain thing and make them simple is amazing, keep it up!

[NoahNymousRich-ypbh]

Great work! One recommendation, us a higher font size as a lot of us consume this king of video with our mobiles. I was starting to get blind at the end of the video

[aamiramin]

thanks Hamed, You explained very precisely.

[miladmohammadi]

مرسی حامد عالی توضیح دادی خیلی کمک کردی

[alimohammadi]

بسیار عالی حامد جان فکر میکنم اگه یکم زوم هم کنید تصویر رو تا کد و مطالب دیگه واضح تر دیده بشن کاربرا بهتر بتونن از مطالب استفاده کنن تشکر

[zdargahi]

is it virtulised or non-vitulised? I think infinite scrolling using Intersection Observer is a sophisticated concept and might worth it to add a high level architectural diagram before diving in coding.

[Parsa.izi]

Thank you for your clear descriptions. when I use your code, scroll down automatically. How can I prevent it? And lock scroll

[yehudazvi]

Why not אם just put aמ Invisible span element at the bottom of the page, and when we reach it more movies are added and it is pushed down, then when we reach it again more movies will be added and it will be pushed down again and so on...

By the way, you explain very well

[prashlovessamosa]

Hamed sir please make some videos on Tanstack Libraries as like Tanstack Query.

[yagelProject]

Tell me please. Do you know how to make React Sanity - Infinite Scrolling
Could you make a video tutorial for this ? When you get to the end of the posts on the first page, the posts from the second page are loaded and added to the URL ? page-2

[asifurrahman]

or maybe you could add a extra div after rendering the list and intersect that div, so you don't have to handle the ref ditaching problem