title: How to use debounce with redux-form correctly?
body: <p>I have a search input.</p>
  
  <pre><code>const { searchMails } = this.props;
  searchMails(keyword);
  </code></pre>
  
  <p>I added the lodash's <code>debounce</code> based on <a href="https://stackoverflow.com/a/36910180/2000548">this answer</a> on Stack Overflow.</p>
  
  <pre><code>const { searchMails } = this.props;
  
  const debounceSearchMails = debounce(searchMails, 1000);
  debounceSearchMails(keyword);
  </code></pre>
  
  <p>The action</p>
  
  <pre><code>export const searchMails = keyword =&gt; ({ type: SEARCH_MAILS, payload: keyword });
  </code></pre>
  
  <p>However, after adding <code>debounce</code>, when I type "hello", it will still trigger 5 times <code>searchMails</code> after 1 second. The payload are</p>
  
  <pre><code>h
  he
  hel
  hell
  hello
  </code></pre>
  
  <p>How can I use debounce correctly? Thanks</p>
  
  <p><strong>UPDATE 1</strong>: add full codes</p>
  
  <pre><code>import React, { PureComponent } from 'react';
  import { Field, reduxForm, reset } from 'redux-form';
  import { Form } from 'reactstrap';
  import debounce from 'lodash/debounce';
  
  class Search extends PureComponent {
    constructor(props) {
      super(props);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    onSubmit(values) {
      const { searchMails } = this.props;
  
      const debounceSearchMails = debounce(searchMails, 1000);
      debounceSearchMails(values.keyword);
    }
  
    render() {
      const { handleSubmit, keyword } = this.props;
  
      return (
        &lt;Form onSubmit={handleSubmit(this.onSubmit)}&gt;
          &lt;Field name="keyword" component="input" type="search" onChange={() =&gt; setTimeout(handleSubmit(this.onSubmit))} /&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  function validate(values) {
    const errors = {};
    return errors;
  }
  
  export default reduxForm({
    validate,
    form: 'searchForm'
  })(Search);
  </code></pre>
  
  <p><strong>UPDATE 2</strong>:</p>
  
  <p>I changed my action to</p>
  
  <pre><code>const searchMails0 = keyword =&gt; ({ type: SEARCH_MAILS, payload: keyword });
  export const searchMails = debounce(searchMails0, 1000);
  </code></pre>
  
  <p>But still same.</p>
  
  <p><strong>UPDATE 3</strong>: this time I changed to this, but still same.</p>
  
  <pre><code>class Search extends PureComponent {
    constructor(props) {
      super(props);
      this.onSubmit = this.onSubmit.bind(this);
      this.debouncedSubmit = debounce(this.onSubmit, 1000);
    }
  
    onSubmit(values) {
      const { searchMails } = this.props;
      searchMails(values.keyword);
    }
  
    render() {
      const { handleSubmit, keyword } = this.props;
      return (
        &lt;Form onSubmit={handleSubmit(this.debouncedSubmit)}&gt;
          &lt;Field name="keyword" component="input" type="search" onChange={() =&gt; setTimeout(handleSubmit(this.debouncedSubmit))} /&gt;
        &lt;/Form&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>UDPATE 4:</strong></p>
  
  <p>I found the issue is somehow related with <code>setTimeout</code>, if I have that like below, <code>debounce</code> won't work. If I remove <code>setTimeout</code>, <code>debounce</code> will work. But then <code>onChange</code> will always return last value. So I do need have it because of redux-form's <a href="https://github.com/erikras/redux-form/issues/537" rel="nofollow noreferrer">this "issue"</a></p>
  
  <pre><code>&lt;Field component="input" type="search" onChange={() =&gt; setTimeout(handleSubmit(debounce(this.onSubmit, 1000)))}/&gt;
  </code></pre>