DEV Community

Infinite scrolling in React with intersection observer

Yogini Bende on September 02, 2021

Hello folks, Few days back I came across the use-case of infinite scroll in React. For this, I used Intersection Observer and found different way...

Read full post

Udit Takkar • Sep 2 '21

Why have to used this ref={setLastElement} ? isn't it supposed to be ref={observer} ?

Rakshit • Jun 21 '22

Read about callback refs for this.

Jai Sandhu • Sep 2 '21

This is great, do you have a solution for infinite scroll + virtualisation? That's the holy grail I haven't been able to implement well

Gal Elmalah • Sep 3 '21 • Edited

A lot of React libs doing that out there Jai Sandhu

Jai Sandhu • Sep 3 '21

Haven't found a good one that caters for different height cells and infinite scrolling

Andy • Sep 6 '21

Hi Jai. This solution has an interesting take on different height cells in a virtualised list. dev.to/miketalbot/react-virtual-wi....

Jai Sandhu • Sep 6 '21

Oooh wow thanks that looks awesome!

Akshay Shinde • Nov 21 '22

Your arcticle helped a lot. Thanks for indetailed explanation. I have some suggestion.
There are 2 ways:

either add observer for the last element
add a empty div below your last ele, and set observer on it.

with 1st we need calculate the last ele, with 2nd it becomes much cleaner and simpler.
Adding YT link for those who want video explanation.
https://www.youtube.com/watch?v=8kLOvs1prEM&t=3s

fires3as0n • Jul 9 '23

Why do you use

const observer = useRef(...);

to store a reference to an observer?

useRef(value)

is nothing but

useMemo(() =>({current: value}), []);

It is a convenience hook often used to store auto-updated refs to an elements (with its return value passed as a ref prop), or in rare cases when we need to update persistent state without causing component to re-render (by manually updating .current value)

Here you are just storing the reference, so it is more intuitive and less confusing to use

const observer = useMemo(() => new Observer(...), [])

instead.

Also since you are still using ref but update it manually using "callback ref", the presence of useRef() in the code makes it harder to understand especially to a novice.

Chi Nguyen • Sep 27 '22

This is great. Do you have any solution for combining infinite scroll and scroll into view? I'm trying to implement into my project, which has a navigation that I can click to go to a certain section and update the active section on my navigation, and also update my navigation whenever I scroll to a section