Scrolling to bottom of container will cause infinite fetching about react-infinite-scroller HOT 6 CLOSED

Please see if my answer about using clear: both fixes your issue as I first wrote here #14.

from react-infinite-scroller.

I added it the the component, so it is now:

loader={<div style={{ clear: 'both' }}>Loading...</div>}

But it is still not working. Important to note that if I remove the loader prop, it does not do the infinite fetching if scrolled to the bottom, however a user would never know that there are now more items to view below the last list item.

from react-infinite-scroller.

It's the way you're merging newItems. Doing the following removes the issue with your example (thanks for providing the full code 🎉)

const items = this.state.items.concat(newItems);
this.setState({
    items,
    start
});

I thought [...old, ...new] would return a new array (as I'm guessing you thought) but React must see that as a mutation and therefore the items appear above the scroll position.

from react-infinite-scroller.

Your response got me curious as to why it was re-rendering. Turns out the problem was my key prop going into the items.

changed

key={Date.now() + item}

to

key={item}

It was unique everytime :( ... can't say it wasn't my first time making that mistake. Thanks for the help tho!

from react-infinite-scroller.

I made that change too but assumed it was the former change that fixed it! 😆

from react-infinite-scroller.

Also, it's better to add .map((item, i) => ... and then key={i}, it doesn't have to be unique across the whole app, just that loop

from react-infinite-scroller.