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.