Infinite loop of network calls

[Vishal0203]

Hi,
I'm facing an issue with a series of network calls made until all the data is retrieved from the database. And this happens without even scrolling the page. It just runs until everything is loaded.

Here's the initial State in my reducer:
NOTE: I had to set nextPageUrl to init just to differentiate between initial state and no data available state in my loadMore(), to stop this series of network calls.

const initialState = {
  loadingMore: false,
  nextPageUrl: 'init',
  items: {
    data: []
  }
};

And this is a part of my loadMore method:

loadMore() {
      .....
      const institute_guid = this.props.auth_user.selectedInstitute.inst_profile_guid;
      let url = `institute/${institute_guid}/category_notifications`;
      if (this.props.announcements.nextPageUrl && this.props.announcements.nextPageUrl != 'init') {
        url = this.props.announcements.nextPageUrl;
        this.props.actions.fetchAnnouncementRequest(url, null)
      }

      if (this.props.announcements.nextPageUrl == 'init') {
        this.props.actions.fetchAnnouncementRequest(url, {category_guid: categories})
      }
}

And finally my DOM:

<InfiniteScroll loadingMore={this.props.announcements.loadingMore} loadMore={() => this.loadMore()}>
                    {this.renderAnnouncements()}
                  </InfiniteScroll>

Please let me know if you need any more information or if I've done anything wrong above.
Thanks.

[dcurletti]

Hi @Vishal0203 - This has to do with your html node's CSS height. The easiest fix is to pass containerHeight="500" or you can set a fixed height to the html node that wraps <InfiniteScroll ....

See #3 for more context.

[Vishal0203]

@dcurletti I'm trying to listen to window scroll event. The comments on #3 talks about hasMore prop and upon adding that I do not need to have my initial state to init anymore. It also says, that there is no need of container height for window scroll event, yet all the requests are made without making a scroll.

[Vishal0203]

okay, it finally worked after adding elementIsScrollable={false} property.

[dcurletti]

Ah, gotcha. Yea that should do the trick.

[naughty-code]

@dcurletti you should make elementIsScrollable default to false, if somebody want it true they would set the containerHeight property.