title: Lodash debounce not working in React
body: <p>it would be best to first look at my code:    </p>
  
  <pre><code>import React, { Component } from 'react';
  import _ from 'lodash';
  import Services from 'Services'; // Webservice calls
  
  export default class componentName extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: this.props.value || null
      }
    }
  
    onChange(value) {
      this.setState({ value });
  
      // This doesn't call Services.setValue at all
      _.debounce(() =&gt; Services.setValue(value), 1000);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;input 
            onChange={(event, value) =&gt; this.onChange(value)}
            value={this.state.value}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Just a simple input. In the contructor it grabs <code>value</code> from the props (if available) at sets a local state for the component.</p>
  
  <p>Then in the <code>onChange</code> function of the <code>input</code> I update the state and then try to call the webservice endpoint to set the new value with <code>Services.setValue()</code>. </p>
  
  <p>What does work is if I set the <code>debounce</code> directly by the <code>onChange</code> of the input like so:</p>
  
  <pre><code>&lt;input 
    value={this.state.value} 
    onChange={_.debounce((event, value) =&gt; this.onChange(value), 1000)} 
  /&gt;
  </code></pre>
  
  <p>But then <code>this.setState</code> gets called only every 1000 milliseconds and update the view. So typing in a textfield ends up looking weird since what you typed only shows a second later.</p>
  
  <p>What do I do in a situation like this?</p>