title: Debouncing with formik, yup and axios
body: <p>trying to debounce an api call to check and see if a given email address has already been taken. </p>
  
  <p>here is faulty logic for that. </p>
  
  <pre><code>const request = email =&gt; {
    return Axios.get(
      'http://localhost:4000/api/v1/users/precheck?user[email]=' + email,
    ).then(response =&gt; {
      return response.data.precheck == 'ok';
    });
  };
  
  const checkEmail = _.debounce(request, 1000);
  
  export const Signup = withFormik({
    mapPropsToValues: () =&gt; ({ email: '' }),
    validationSchema: object().shape({
      email: string()
        .email('Invalid email address')
        .required('Email is required!')
        .test('email', 'email already taken', email =&gt; {
          _.debounce(checkEmail(email));
        }),
    }),
   ...
  })(InnerForm);
  </code></pre>
  
  <p>this will produce</p>
  
  <pre><code>createValidation.js:63 Uncaught (in promise) ValidationError {name: "ValidationError", value: "aaa", path: "email", type: undefined, errors: Array(1), …}
  Promise.then (async)
  validate @ createValidation.js:107
  (anonymous) @ mixed.js:245
  (anonymous) @ mixed.js:244
  Promise.then (async)
  _validate @ mixed.js:238
  validate @ mixed.js:256
  (anonymous) @ object.js:202
  (anonymous) @ object.js:188
  Promise.then (async)
  _validate @ object.js:179
  validate @ mixed.js:256
  validateYupSchema @ formik.esm.js:547
  (anonymous) @ formik.esm.js:205
  Formik._this.runValidationSchema @ formik.esm.js:200
  Formik._this.runValidations @ formik.esm.js:217
  executeChange @ formik.esm.js:257
  Formik._this.handleChange @ formik.esm.js:269
  callCallback @ react-dom.development.js:100
  invokeGuardedCallbackDev @ react-dom.development.js:138
  invokeGuardedCallback @ react-dom.development.js:187
  invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
  executeDispatch @ react-dom.development.js:461
  executeDispatchesInOrder @ react-dom.development.js:483
  executeDispatchesAndRelease @ react-dom.development.js:581
  executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
  forEachAccumulated @ react-dom.development.js:560
  runEventsInBatch @ react-dom.development.js:723
  runExtractedEventsInBatch @ react-dom.development.js:732
  handleTopLevel @ react-dom.development.js:4476
  batchedUpdates$1 @ react-dom.development.js:16659
  batchedUpdates @ react-dom.development.js:2131
  dispatchEvent @ react-dom.development.js:4555
  interactiveUpdates$1 @ react-dom.development.js:16714
  interactiveUpdates @ react-dom.development.js:2150
  dispatchInteractiveEvent @ react-dom.development.js:4532
  formik.esm.js:529 Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
      at yupToFormErrors (formik.esm.js:529)
      at formik.esm.js:208
  yupToFormErrors @ formik.esm.js:529
  (anonymous) @ formik.esm.js:208
  Promise.then (async)
  (anonymous) @ formik.esm.js:205
  Formik._this.runValidationSchema @ formik.esm.js:200
  Formik._this.runValidations @ formik.esm.js:217
  executeChange @ formik.esm.js:257
  Formik._this.handleChange @ formik.esm.js:269
  callCallback @ react-dom.development.js:100
  invokeGuardedCallbackDev @ react-dom.development.js:138
  invokeGuardedCallback @ react-dom.development.js:187
  invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
  executeDispatch @ react-dom.development.js:461
  executeDispatchesInOrder @ react-dom.development.js:483
  executeDispatchesAndRelease @ react-dom.development.js:581
  executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
  forEachAccumulated @ react-dom.development.js:560
  runEventsInBatch @ react-dom.development.js:723
  runExtractedEventsInBatch @ react-dom.development.js:732
  handleTopLevel @ react-dom.development.js:4476
  batchedUpdates$1 @ react-dom.development.js:16659
  batchedUpdates @ react-dom.development.js:2131
  dispatchEvent @ react-dom.development.js:4555
  interactiveUpdates$1 @ react-dom.development.js:16714
  interactiveUpdates @ react-dom.development.js:2150
  dispatchInteractiveEvent @ react-dom.development.js:4532
  </code></pre>