Infinite scrolling in React using Intersection Observer

Рет қаралды 8,877

Күн бұрын

Implement infinite scrolling (pagination) in React using the Intersection Observer API.
👉🏼 Summary note on my site:
🔗 www.hamedbahram.io/notes/inte...
👉🏼 The Ultimate NextJs course
🔗 www.hamedbahram.io/courses/ne...

Пікірлер: 40

@datfeela2578 Жыл бұрын

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

@hamedbahram Жыл бұрын

Thanks datfeela for your kind words, very glad you found the videos helpful.

@aamiramin6112 Жыл бұрын

thanks Hamed, You explained very precisely.

@hamedbahram Жыл бұрын

Thanks Aamir! glad you think so.

@pavanchalla3787 4 ай бұрын

Thanks hamed brother, really helpful, I was using the react-infinite-scroll-component 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

@hamedbahram 4 ай бұрын

Glad it helped!

@visheshgarg8113 Жыл бұрын

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

@hamedbahram Жыл бұрын

Thanks man! I appreciate the comment.

@NoahNymousRich-yp2bh Жыл бұрын

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

@hamedbahram Жыл бұрын

Thanks for the feedback Noah! I'll keep that in mind and will use bigger fonts in the next videos.

@ermias_bahru Жыл бұрын

thanks man!

@hamedbahram Жыл бұрын

Welcome to the channel Ermias. Happy to help!

@miladmohammadi3233 Жыл бұрын

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

@hamedbahram Жыл бұрын

Eraadat 🫡

@zdargahi 6 ай бұрын

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.

@hamedbahram 6 ай бұрын

This is non-virtualized. Agreed, I'll have that in mind for future videos. Thanks for the feedback.

@scriptkiddie7959 Жыл бұрын

Can you share that Google doc from which you are reading about `Callback ref`

@hamedbahram Жыл бұрын

I'm publishing that on a blog post called `React hooks` where I've summarized React hooks

@asifurrahman5436 5 ай бұрын

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

@hamedbahram 5 ай бұрын

For sure! There are different ways to implement this.

@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

@hamedbahram Жыл бұрын

There are different ways to implement infinite scrolling or pagination. You can use url params to set and read the `page` and fetch the corresponding posts. I will create a video on Sanity at some point in the future so stay tuned if you're not in a rush.

@yagelProject Жыл бұрын

@@hamedbahram I will definitely be looking forward to it. Thank you!

@yehudazvi942 Жыл бұрын

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

@hamedbahram Жыл бұрын

That works too! There are different ways to do it for sure.

@John-eq5cd 6 ай бұрын

Good idea I did this. It worked very effectively.

@Parsa.izi724 10 ай бұрын

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

@hamedbahram 10 ай бұрын

My pleasure! can you expand on your question? what are you trying to do?

@Parsa.izi724 10 ай бұрын

@@hamedbahram I am creating a chat app, and I want to load more messages by scrolling down and scrolling up, but when I load more messages by scrolling down, the scroller goes to the bottom of the div, how can I prevent and fix the scroller? I hope I have explained correctly

@hamedbahram 10 ай бұрын

@@Parsa.izi724 Got it. Are you using intersection observer?

@Parsa.izi724 10 ай бұрын

@hamedbahram Yes, I do.and I use Redux to append the messages