title: Fetch more content as user is scrolling down
body: <p>I have a page with a search input, once the user click on submit results come up.</p>
  
  <p>There can be a lot of results and I don't want to load them all at once, how can I fetch more data into the page using Lodash throttle on mouse move?</p>
  
  <p>This is my react component:</p>
  
  <pre><code>const getContacts = async (searchString) =&gt; {
    const { data: contactsInfo} = await axios.get(`api/Contats/Search?contactNum=${searchString}`);
    return contactsInfo;
  };
  export default class Home extends React.Component {
    state = {
      contactsInfo: [],
      searchString: '',
    };
  
    handleSubmit = async () =&gt; {
      const { searchString } = this.state;
      const contactsInfo = await getContacts(searchString);
      this.setState({ contactsInfo });
    };
  
    onInputChange = e =&gt; {
      this.setState({
        searchString: e.target.value,
      });
    };
  
    onMouseMove = e =&gt; {
  
    };
  
    render() {
      const { contactsInfo, searchString, } = this.state;
      return (
            &lt;div css={bodyWrap} onMouseMove={e =&gt; this.onMouseMove(e)}&gt;
              &lt;Header appName="VERIFY" user={user} /&gt;
              {user.viewApp &amp;&amp; (
                &lt;div css={innerWrap}&gt;
                  &lt;SearchInput
                    searchIcon
                    value={searchString || ''}
                    onChange={e =&gt; this.onInputChange(e)}
                    handleSubmit={this.handleSubmit}
                  /&gt;
                       {contactsInfo.map(info =&gt; (
                        &lt;SearchResultPanel
                          info={info}
                          isAdmin={user.isAdmin}
                          key={info.id}
                        /&gt;
                      ))}
                &lt;/div&gt;
              )}
              &lt;Footer /&gt;
            &lt;/div&gt;
  
      );
    }
  }
  </code></pre>