title: React infinite scroll keeps making requests forever
body: <p>I am using this library <a href="https://www.npmjs.com/package/react-infinite-scroller" rel="nofollow noreferrer">https://www.npmjs.com/package/react-infinite-scroller</a> for loading more when scroll reaches the end. </p>
  
  <p>My code looks as below:</p>
  
  <pre><code>import React from 'react';
  import {Route, Link} from 'react-router-dom';
  import FourthView from '../fourthview/fourthview.component';
  import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
  import traineeship from './traineeship.api';
  import Header from '../header/header.component';
  import InfiniteScroll from 'react-infinite-scroller';
  
  require('./traineeship.style.scss');
  
  class Traineeship extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              companies: [],
              page: 0,
              resetResult: false,
          };
      }
  
      componentDidMount() {
          this.fetchCompanies(this.state.page);
      }
  
      fetchCompanies = page =&gt; {
          traineeship.getAll(page).then(response =&gt; {
              if (response.data) {
                  const companies = Array.from(this.state.companies);
                  this.setState({companies: companies.concat(response.data._embedded.companies)});
              } else {
                  console.log(response);
              }
          });
      };
  
      render() {
          return (
              &lt;div className={"wrapperDiv"}&gt;
                  {JSON.stringify(this.props.rootState)}
                  &lt;div className={"flexDivCol"}&gt;
                      &lt;div id="header"&gt;
                          &lt;Header/&gt;
                      &lt;/div&gt;
                      &lt;div id="result"&gt;
                          &lt;div className={"search"}&gt;
                              &lt;h2&gt;Harjoittelupaikkoja&lt;/h2&gt;
                              &lt;p className={"secondaryColor"}&gt;{this.state.companies.length} paikkaa löydetty&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div className={"filters"}&gt;
                              &lt;h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}&gt;
                                  Hakukriteerit&lt;/h5&gt;
                              &lt;div className={"filter"}&gt;Ravintola- ja cateringala&lt;/div&gt;
                              &lt;div className={"filter"}&gt;Tarjoilija&lt;/div&gt;
                              &lt;div className={"filter"}&gt;Kaikki&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className={"searchResults"}&gt;
                              &lt;h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}&gt;
                                  Hakutulokset&lt;/h5&gt;
  
                              &lt;InfiniteScroll
                                  pageStart={0}
                                  loadMore={ this.fetchCompanies }
                                  hasMore={true || false}
                                  loader={&lt;div className="loader" key={0}&gt;Loading ...&lt;/div&gt;}
                                  useWindow={false}
                              &gt;
                                  {
                                      this.state.companies.map((traineeship, key) =&gt; (
                                          &lt;div id={"item"} key={key}&gt;
                                              &lt;div className={"companyInfo"}&gt;
                                                  &lt;div className={"heading"}&gt;
                                                      &lt;div id={"companyDiv"}&gt;
                                                          &lt;p style={{
                                                              fontSize: '18px',
                                                              lineHeight: '18px'
                                                          }}&gt;{traineeship.name}&lt;/p&gt;
                                                      &lt;/div&gt;
                                                      {
                                                          traineeship.video == null
                                                              ? ''
                                                              :
                                                              &lt;div id={"videoDiv"}&gt;
                                                                  &lt;div className={"youtubeBox center"}&gt;
                                                                      &lt;div id={"youtubeIcon"}&gt;
                                                                          &lt;a className={"primaryColor"}
                                                                             href={traineeship.mediaUrl}&gt;
                                                                          &lt;span style={{marginRight: '3px'}}&gt;&lt;Image
                                                                              src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
                                                                              style={{
                                                                                  width: '24px',
                                                                                  height: '17px'
                                                                              }}/&gt;&lt;/span&gt;
                                                                              &lt;span&gt; &lt;p style={{
                                                                                  fontSize: '13px',
                                                                                  lineHeight: '18px',
                                                                                  margin: 0,
                                                                                  display: 'inline-block'
                                                                              }}&gt;Esittely&lt;/p&gt;&lt;/span&gt;
                                                                          &lt;/a&gt;
                                                                      &lt;/div&gt;
                                                                      &lt;div id={"txtVideo"}&gt;
  
                                                                      &lt;/div&gt;
                                                                  &lt;/div&gt;
                                                              &lt;/div&gt;
                                                      }
  
                                                  &lt;/div&gt;
                                                  &lt;div className={"location"}&gt;
                                                      &lt;div id={"locationIcon"}&gt;
                                                          &lt;Image src="assets/img/icLocation.png"
                                                                 style={{marginTop: '-7px'}}/&gt;
                                                      &lt;/div&gt;
                                                      &lt;div id={"address"}&gt;
                                                          &lt;a href={"https://www.google.com/maps/search/?api=1&amp;query=" + encodeURI("Fredrikinkatu 4, Helsinki")}&gt;
                                                              &lt;p className={"primaryColor"}
                                                                 style={{fontSize: '13px'}}&gt;{traineeship.city}(show in
                                                                  map)&lt;/p&gt;
                                                          &lt;/a&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div className={"companyDescription"}&gt;
                                                      &lt;p className={"secondaryColor"} style={{
                                                          fontSize: '14px',
                                                          lineHeight: '20px'
                                                      }}&gt;{traineeship.description}&lt;/p&gt;
                                                  &lt;/div&gt;
  
                                                  &lt;div className={"companyContacts"} style={{marginTop: '20px'}}&gt;
                                                      &lt;p className={"contactInfo"}&gt;URL: {traineeship.website}&lt;/p&gt;
                                                      &lt;p className={"contactInfo"}&gt;Email: {traineeship.email}&lt;/p&gt;
                                                      &lt;p className={"contactInfo"}&gt;Puh: {traineeship.phonenumber}&lt;/p&gt;
                                                      &lt;p className={"contactInfo"}&gt;Contact: {traineeship.contact}&lt;/p&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      ))
                                  }
                              &lt;/InfiniteScroll&gt;
  
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Traineeship;
  </code></pre>
  
  <p>The problem is that it keep calling the fetchCompanies forever. Is there any fix for this?</p>
  
  <p>In the documentation there is no samples of how the loadmore function should look like.</p>