title: Using Lodash debounce in React to prevent requesting data as long as the user is typing
body: <p>I don't want to fire requests as long as the user is typing. My code should throttle requests so that when the user types quickly, it will fire one request with the latest input value instead of many.</p>
  
  <p>For now when I'm typing "test" it fires 4 different requests:</p>
  
  <ol>
  <li>"t"</li>
  <li>"te"</li>
  <li>"tes"</li>
  <li>"test"</li>
  </ol>
  
  <p>So I found lodash _.debounce and _.throttle ( [<a href="https://lodash.com/docs/4.17.4#debounce]" rel="noreferrer">https://lodash.com/docs/4.17.4#debounce]</a> ) but don't really understand how I can inplement it to my code. Can anyone help me?</p>
  
  <p>My code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import './style.css';
  
  import { search } from '../../actions/';
  
  class SearchBar extends Component {
    constructor(props) {
      super(props);
      this.state = { searchTerm: '' };
    }
  
    startSearch(query) {
      const storedTerms = this.props.searchedTerm;
      let foundDuplicate = false;
  
      if (storedTerms.length === 0 &amp;&amp; query) {
        return this.props.search(query);
      }
  
      if (storedTerms.length !== 0 &amp;&amp; query) {
        const testDuplicate = storedTerms.map(term =&gt; term === query);
        foundDuplicate = testDuplicate.some(element =&gt; element);
      }
  
      if (storedTerms.length !== 0 &amp;&amp; !query) {
        return false;
      }
  
      if (foundDuplicate) {
        return false;
      }
  
    return this.props.search(query);
  }
  
  handleInputChange(term) {
    this.setState({ searchTerm: term });
    this.startSearch(term);
  }
  
  render() {
    return (
      &lt;div className="Search-bar"&gt;
        &lt;input
          value={this.state.searchTerm}
          onChange={event =&gt; this.handleInputChange(event.target.value)}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  
  function mapStateToProps(state) {
    return {
      searchedTerm: state.searchedTerm,
      savedData: state.savedData,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ search }, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
  </code></pre>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>Thx to Sagiv b.g, I'm adding some explanation:</p>
  
  <p>ok, so the user should type more than 2 letters &amp;&amp; also my app should wait minimum 2 seconds before starting ajax request</p>
  
  <hr>
  
  <p><strong>EDIT2:
  Thx to Sagiv b.g, for great solution!</strong></p>
  
  <p>I've changed my code like so:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import _ from 'lodash';
  import './style.css';
  
  import { search } from '../../actions/';
  
  class SearchBar extends Component {
    constructor(props) {
      super(props);
      this.state = { inputValue: '' };
  
      this.startSearch = _.debounce(this.startSearch, 2000);
    }
  
    startSearch(query) {
      const storedTerms = this.props.searchedTerm;
      let foundDuplicate = false;
  
      if (storedTerms.length === 0 &amp;&amp; query) {
        return this.props.search(query);
      }
  
      if (storedTerms.length !== 0 &amp;&amp; query) {
        const testDuplicate = storedTerms.map(term =&gt; term === query);
        foundDuplicate = testDuplicate.some(element =&gt; element);
      }
  
      if (storedTerms.length !== 0 &amp;&amp; !query) {
        return false;
      }
  
      if (foundDuplicate) {
        return false;
      }
  
      return this.props.search(query);
    }
  
    onChange = ({ target: { value } }) =&gt; {
      this.setState({ inputValue: value });
      if (value.length &gt; 2) {
        this.startSearch(value);
      }
    };
  
    render() {
      return (
        &lt;div className="Search-bar"&gt;
          &lt;input
            placeholder="Type something to search GitHub"
            value={this.state.inputValue}
            onChange={this.onChange}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      searchedTerm: state.searchedTerm,
      savedData: state.savedData,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ search }, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
  </code></pre>
  
  <hr>
  
  <p><strong>Last Bug to deal with</strong></p>
  
  <p>But it has one last bug, that I don't know how to get rid off. When the user wants to change search query and uses backspace to erase search field, my app always fires unexpectedly another API request.
  Here is an example:</p>
  
  <p><a href="https://youtu.be/uPEt0hHDOAI" rel="noreferrer">https://youtu.be/uPEt0hHDOAI</a></p>
  
  <p><strong>Any ideas how I can get rid of that behavior?</strong></p>