title: Debounce implementation
body: <p>I'm having difficulty implementing lodash :</p>
  
  <p>I'm trying to make it so that my input field triggers my check if exist API call every second after keystrokes end rather than every second.</p>
  
  <p>(Ill separate the updateInput function later so that first it sets the input value then it calls the debounced API call method that I should create.)</p>
  
  <pre><code>import React, { Component } from 'react';
  import _ from 'lodash';
  import { Input, Row, Col } from 'reactstrap';
  import loading from '../../../../img/loading.gif';
  
  class InputTypeComponent extends Component {
  
      constructor(props) {
          super(props);
          const initialValue = props.value;
          this.state = {
              ...initialValue,
          };
          this.updateInput = this.updateInput.bind(this);
          this.handleProviderChange = this.handleProviderChange.bind(this);
          this.updateInput = _.debounce(this.updateInput, 1000);
      }
  
  componentWillMount() {
      this.setState({ inputIcon: this.props.icon.inputIcon });
  }
  
  componentWillReceiveProps(newProps) {
      const response = newProps.response;
      const old = this.props.response;
      const { id, onChange } = this.props;
      if (response !== old &amp;&amp; response.objectIdentifier === id) {
          let number = 2;
          if (response.objectName === '') {
              number = 0;
          } else if (response.activ) {
              if (response.isthere) {
                  number = 4;
              } else {
                  number = 3;
              }
          }
          this.setState({ inputIcon: number });
          onChange({ icon: {
              ...this.props.icon,
              inputIcon: number,
          } }, this.props.id);
      }
  }
  
  onRemove = () =&gt; {
      this.props.onRemove(this.props.id);
  };
  
  onChange = () =&gt; {
      this.props.onChange(this.props.id);
  };
  
  updateInput(event) {
      const { onChange, exists } = this.props;
      const inputValue = event.target.value.toUpperCase();
      this.setState({ input: inputValue });
      onChange({ value: {
          ...this.state,
          input: inputValue,
      } }, this.props.id);
      const placeHolder = this.props.placeholder.toLowerCase();
      const objectIdentifier = this.props.id;
      const payload = {
          objectType: placeHolder,
          objectName: inputValue,
          objectIdentifier,
          objectFisrt: '',
      };
      exists(payload);
  }
  
  render() {
      const { placeholder, provider, size } = this.props;
      const { inputIcon } = this.state;
      this.type = placeholder;
      return (
          &lt;Row&gt;
              &lt;Col xs="8"&gt;
                  &lt;Row&gt;
                      &lt;Col xs="11"&gt;
                          &lt;Input
                              value={this.state.input}
                              onChange={this.updateInput}
                              placeholder={placeholder}
                          /&gt;
                      &lt;/Col&gt;
                      &lt;Col xs="1" className="margintop noPadding"&gt;
                          {{
                              0: (
                                  &lt;div /&gt;
                              ),
                              1: (
                                  &lt;img className="colorImgBlue" src={loading} alt="loading" /&gt;
                              ),
                              2: (
                                  &lt;i className="fa fa-times red iconsize" /&gt;
                              ),
                              3: (
                                  &lt;i className="fa fa-check text-success iconsize" /&gt;
                              ),
                              4: (
                                  &lt;i className="fa fa-check text-success iconsize" /&gt;
                              ),
                              default: (
                                  &lt;div /&gt;
                              ),
                          }[inputIcon]}
                      &lt;/Col&gt;
                  &lt;/Row&gt;
             &lt;/Col&gt;
        &lt;/Row&gt;
     );
  }
  </code></pre>
  
  <p>this broke my code now the UpdateInput function never triggers.</p>
  
  <p>docs and blogs on all this are sparce so I've nowhere else to go.</p>
  
  <p><a href="https://i.stack.imgur.com/6ELTh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6ELTh.png" alt="enter image description here"></a></p>