1

I'm trying to paginate (run an API request) when a user scrolls to the bottom of a div, although it is invoking this multiple times for the same scroll, causing hundreds of API requests for one pagination.

Inside componentDidMount I have,

document.addEventListener('scroll', this.trackScrolling);

Which does this:

trackScrolling = async () => {
    const wrappedElement = document.getElementById('profileArea');

    if (this.isBottom(wrappedElement)) {
        await this.paginateProfiles();
    }
};

isBottom:

isBottom(el : any) {
    return el.getBoundingClientRect().bottom <= window.innerHeight;
}

I will also share paginateProfiles:

async paginateProfiles() {
    if (this.state.profilesPaginating) {
        return;
    }

    await this.setState({
        profilesPaginating: true
    });

    var component = this;
    var page = this.state.profilesNextPage;

    await axios.get(process.env.REACT_APP_API_URL + '/profiles?amount=8&page=' + page)
        .then(async (response) => {
            await component.setState({
                profiles: this.state.profiles.concat(response.data),
                profilesNextPage: this.state.profilesNextPage + 1,
                profilesPaginating: false,
            });
        });
}

Technical description of the issue: This is difficult to explain or what causes it, but it seems to be after around 10 paginations it will suddenly go into spam mode and send about 50 API requests and get stuck on loading. If I scroll back up to the top they will stop after a few seconds and wont make any more.

folipe7691
  • 51
  • 3
  • You need to stop calling the api until you have a response, should be quite ease to implement, as simple as adding a boolean state – Ploppy Sep 12 '21 at 16:46
  • I have done said thing, as well as blocking the method at the very top scope if it evaluates to true, meaning it cannot call that method twice, but it is, that's what my question intends on fixing. – folipe7691 Sep 12 '21 at 16:47
  • https://stackoverflow.com/questions/45585542/detecting-when-user-scrolls-to-bottom-of-div-with-react-js/49573628 try this – sojin Sep 12 '21 at 16:48
  • Also yes I am using an asynchronous context but I am awaiting all calls, so it shouldn't cause any issues here. – folipe7691 Sep 12 '21 at 16:48
  • @sojin I'll give this a go and see how it plays out, thanks. – folipe7691 Sep 12 '21 at 16:49
  • Does not answer your question but. Instead of using `scroll` you should use (if the browsers you need to support allows that) use [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) – t.niese Sep 12 '21 at 16:55
  • @sojin that option is even worse than my approach it seems, it seems to always double up on requests thinking I'm always at the bottom. – folipe7691 Sep 12 '21 at 16:56
  • `Also yes I am using an asynchronous context but I am awaiting all calls, so it shouldn't cause any issues here.` the `addEventListner` does not do anything with the promise returned by `this.trackScrolling`, the even of user interaction events cannot be delayed in such a way. – t.niese Sep 12 '21 at 16:57
  • @folipe7691 The important part about the link of [soljin](https://stackoverflow.com/users/8736569) is the `document.removeEventListener('scroll', this.trackScrolling);` remove the listener before fetching, and add it again after the fetch of the data, and modifying the DOM is complete. – t.niese Sep 12 '21 at 16:59
  • I've given it an answer. – folipe7691 Sep 12 '21 at 17:15

1 Answers1

0

Explanation

None of the solutions explain they rely on the height of the window always changing after each event listener. If your API returns no results (maybe it ran out) the event handler will think its still initially at the bottom as it hasn't changed, the event listener has been re-registered because the profiles have been fetched but none returned.

Solution

Compare result lengths, and only add the event listener back if it != (there were new records on the last pagination, so there may be more).

Not ideal as it renders the event listener lost if even one API request returns nothing, but it works...

folipe7691
  • 51
  • 3