title: Infinite scroll for React List
body: <p>So I have a list of 5k elements. I want to display them in parts, say each part is 30 items. The list of items is in the component's state. Each item is an object taken from the API. It has properties on which I have to make an API call. By parts, to avoid enormous load time. So this is what I've got so far(simplified):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>let page=1;
  
  class GitHubLists extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              repos: [],
              contributors: []
          }
      }
      componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
        axios.get(org)
          .then(res =&gt; setState({contributors: res})
      }
       handleScroll() {
          page++;
      }
      componentWillUnmount() {
          window.removeEventListener('scroll', this.handleScroll);
      }
      render() {
          const contributors = this.state.contributors.slice(0,30*page).map(contributor =&gt;
              &lt;li key={contributor.id}&gt;{contributor.login} {contributor.contributions}&lt;a href={contributor.url}&gt;View on GitHub&lt;/a&gt;&lt;/li&gt;
          );
          return (
              &lt;div onScroll={this.handleScroll}&gt;{contributors}&lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Like I said each item(contributor in this case) has properties which values are links for the API calls. 3 to be exact. On each one of them, I need to make an API call, count the items inside the response and display them.</p>