title: How to make infinite scroll fetch function work in order
body: <p>I want to infinite scroll to fetch any items, the brief step is:</p>
  
  <p>1) scroll at the end of screen.</p>
  
  <p>2) use redux to update items pageIndex.</p>
  
  <p>3) use <code>componentDidUpdate</code> to catch this redux action.</p>
  
  <p>4) append the fetch items to the end of items' array.</p>
  
  <pre><code>class InfiniteScroll extends React.Component {
    componentDidMount() {
      window.addEventListener("scroll", throttle(this.onScroll, 500), false);
    }
    componentWillUnmount() {
      window.removeEventListener("scroll", this.onScroll, false);
    }
    componentDidUpdate(preProps) {
      if (props.pageindex === preProps.pageindex + 1)
        fetchItems(...);
    }
    onScroll = () =&gt; {
      if (
        window.innerHeight + window.scrollY &gt;=
        document.body.offsetHeight - 100
      ) {
        updatePage(...);
      }
    };
    render() {
      return &lt;Component {...this.props} /&gt;;
    }
  }
  </code></pre>
  
  <p>The only problem with this code is when <code>updatePage</code> executes once, the <code>fetchItems</code> can not follow it immediately.</p>