title: Using lodash debounce to set the state in react js
body: <p>I know this has been asked a thousand times, but I am not sure how I am doing this wrong. I have read tons of stackoverflow and what I am looking for is: <strong>How am I doing this wrong?</strong></p>
  
  <p>So consider the following function:</p>
  
  <pre><code>setFormValues(fieldName, value) {
      let values = this.state.values;
  
      values[fieldName] = value;
  
      this.setState({
        values: values
      }, () =&gt; {
        debounce(() =&gt; {
          this.setState({
            validationErrors: validator(this.state.validations, this.state.values),
          });
        }, 350);
      });
    }
  </code></pre>
  
  <p>Every time an element value changes, we pass that to the form (each element is its own react class that calls this function). After we set the value in the form (used for posting data) we have to validate the values of the form.</p>
  
  <p>Lets look at the validator file:</p>
  
  <pre><code>import React from 'react';
  import moment from 'moment';
  import startCase from 'lodash.startcase';
  
  /**
   * Validate the form values.
   */
  export const validator = (validations, formValues) =&gt; {
    let validationMessages = {};
  
    for (const key in formValues) {
      if (validations.hasOwnProperty(key)) {
        const fieldValidations  = validations[key];
        const validationMessage = createValidationMessage(key, formValues[key], formValues, fieldValidations);
  
        if (validationMessage !== null) {
          validationMessages[key] = validationMessage;
        }
      }
    }
  
    return validationMessages;
  }
  
  /**
   * Create a a validation message when the validatiom for the form value
   * fails against the form field validations.
   */
  const createValidationMessage = (fieldName, value, formValues, fieldValidations) =&gt; {
    let message = null;
  
    fieldValidations.forEach((fieldValidation) =&gt; {
      if (fieldValidation.hasOwnProperty('cannot_percede_field')) {
        if (formValues.hasOwnProperty(fieldValidation.cannot_percede_field)) {
          const formValue = formValues[fieldValidation.cannot_percede_field];
  
          if (isFutureDate(value, fieldValidation)) {
            message = {
              message: 'Date cannot be greator then today.',
              isError: fieldValidation.show_error,
            };
          }
  
          if (isDateLessThen(value, formValue, fieldValidation)) {
            message = {
              message: 'Date cannot be less then: ' + startCase(fieldValidation.cannot_percede_field) + '.',
              isError: fieldValidation.show_error,
            };
          }
        }
      }
    })
  
    return message;
  }
  
  /**
   * Is the date in question greator then date saved?
   */
  const isFutureDate = (value, validationObject) =&gt; {
    if (validationObject.cannot_be_future_date) {
      return moment(value).isAfter(moment());
    }
  
    return false;
  }
  
  /**
   * Is the date in question less then the date saved?
   */
  const isDateLessThen = (value, formValue, validationObject) =&gt; {
    if (validationObject.cannot_percede_field) {
      return moment(value).isBefore(formValue);
    }
  
    return false;
  }
  </code></pre>
  
  <p>All we do is loop over the values, check if the validator has specific rules for that field. In this case if the field sates it cannot precede another field, we state the validation message, if the field in question is greater then today, again we set the message.</p>
  
  <p><strong>Whats the issue?</strong></p>
  
  <p>If I take off the debounce, and leave it as setting the sate with validation messages, assuming there are any, the form input is very slow. But the validation works and the messages are displayed properly.</p>
  
  <p>if I leave the debounce as it is, and force a failure (for example a date field that precedes another date field) nothing happens.</p>
  
  <p>What I understand is that the issue might be I am calling debounce over and over again and thus the function never fires. but when you select a date, it should only call it once, wait 350 ms and then either show or not the validation errors.</p>
  
  <p><strong>What am I doing wrong with lodashes debounce such that it doesn't even work?</strong></p>