next being triggered again if I scroll fast

[dshacham]

I went over all the issues here and I couldn't find a clear solution. I'm using a function component with hooks, if it matters. When I scroll down in a "normal" pace, everything is fine. But if I scroll down fast, next is fired again and I get duplicates.

[ankeetmaini]

It might depend on your scroll threshold. It shouldn't happen ideally as I keep track of a condition and lock it unless new props aren't flowing https://github.com/ankeetmaini/react-infinite-scroll-component/blob/d5b4e5250669022db5217763afd22fb3995a505a/src/index.tsx#L146

[dshacham]

I'm not sure I know what you mean by that. I don't think I changed anything with the scroll threshold since I don't even know what it is...

[aliakbarazizi]

I have same issue, if you go fast at bottom of scroll it keep loading next page and stay at bottom

[syntaxc]

Same issue here. If I scroll to the bottom, it will start loading new data and not stop. It seems to continually scroll the current location to the bottom, and inadvertently loading more data.

<InfiniteScroll
      dataLength={onScreenEntries.length}
      next={fetchMoreData}
      style={{ display: "flex", flexDirection: "column-reverse" }} //To put endMessage and loader to the top.
      hasMore={true}
      >
            {onScreenEntries.map((e, i) => (
              <div key={i}>
                <FeedEntry entry={e} />
              </div>
            ))}
</InfiniteScroll>

[Faey2222]

I can confirm this issue. Actually you don't even have to scroll that fast for this to happen if the threshold isn't modified.

In my certain case the method fired by next is a async call to a server. The request gets fired twice. If I change the method called by next to a simple console.log it also is shown twice within the console.

[Tamy67]

Hello, I have the same problem. Did you find the solution?

[cizordj]

My solution to this problem was:

const fetchMoreData = () => {
  isLoading || dispatch(loadMoreData());
}

This way the method won't fetch any more data until the previous request finishes its execution.