Feature: Infinite Scroll in React

Learn how to create an infinitely scrolling list in React.

Code:

----
Video Suggestions:

----
Follow Me Online Here:

----
#benawad
​
----
#benawad

[tristanyven]

I know it's an old video but for those looking for infinite scrolling and data fetching but :
- It is better to use Promise / callback function for data fetching instead of a setTimeout, it will always wait for your function to catch the elements instead of waiting 100ms.
imagine if the user has connection issues, it will cause your app to crash in the worst case.
Great video nonetheless !! keep going

[blinkkeebs]

I'm back to the video accidentally, this is the first series I follow along in your channel, Ben. Tks a lot. And I meet an issue with the `scrollTop` property in 2021. The value it returns is a negative number when I scroll to the top and hits 0 at the bottom. I'm not sure why but might be `column-reverse`. To fix it and check whether I hit the top I use the expression:

this.scroller.scrollHeight - === this.scroller.clientHeight ? "hit the top" : "scrolling..."

[Ryan-vnde]

Hey Ben, quick question. When you define this.scroller = scroller, where exactly are you defining the variable scroller?

[meowmixmixGames]

Hey,

I''m working on a chat app with infinite scroll too and this has been really helpful. I have run into an issue though that I haven't found an easy answer for. When I use
display: 'flex',
flexDirection: 'column-reverse',
overflowY: 'auto'
on my div that contains all the messages, it works great in chrome but on Firefox it doesn't have a scroll bar to scroll up at all. Do you have any ideas?

[andresmurguido]

Is it normal to be getting a duplicate key warning at this point? Seems like the query is getting triggered more than once.

[nemnoton]

So you start at the bottom and scroll upwards to load more messages? Usually you scroll downwards. I guess it wouldn't be too hard to adjust the code to reverse it.

[andresmontoya]

Hi! Good job Ben, awesome video! But that version of React has some problems with the scroll... And sometimes it crashes! So, one solution that i found is this one ->


Update the ref to the new way and in the keys, instead to use id I use the indexes

[flumiie]

i'm putting the onscroll and ref on the root <div> of the render and still no console.log appears for the scrollTop

[muthuraja]

this.scroller.scrollTop values comes 0 only, not comes dynamic. please help.