Disabling a form button while there's an http request running I have a form built with react, formik and yup, and this form has some async validations. Apparently, some users were able to bypass these validations, and to prevent some errors, I wanted to disable the submit button when there's a pending http request.

Many years ago, I used to handle this very easily with jQuery, but now, this is not the case.

I came up with a solution where I used the useEffect hook to set a state in case there's an http request running, and the way I'm detecting this is what I wanted your opinion.

Basically:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Input } from '../../../../components/Formik';

const Form = props =&gt; {
  const [disableSubmitBtn, setDisableSubmitBtn] = useState(false);

  useEffect(() =&gt; {
    axios.interceptors.request.use(
      configs =&gt; {
        console.log('http req running');
        setDisableSubmitBtn(true);
        return configs;
      },
      error =&gt; {
        return Promise.reject(error);
      },
    );
    console.log('no http req running');
    setDisableSubmitBtn(false);
  }, [disableSubmitBtn]);

  return (
    &lt;form
      className="form-horizontal"
      onSubmit={e =&gt; {
        props.handleSubmit(e);
      }}
    &gt;
      {props.settings.bonuscode &amp;&amp; (
        &lt;fieldset&gt;
          &lt;Input
            id="marketing.bonus_code"
            {...props.user.marketing.bonus_code}
            {...props}
            classNameLabel="col-md-5"
            classNameInput="col-md-7"
          /&gt;
        &lt;/fieldset&gt;
      )}

      &lt;button
        id="wordreg-form-submit"
        type="submit"
        disabled={props.settings.formSubmited || disableSubmitBtn}
      &gt;
        Submit
      &lt;/button&gt;
    &lt;/form&gt;
  );
};

export default Form;


So what matters is actually the code inside the useEffect hook. Whad do you think about it? 
Is it ok to check for pending http requests this way?
Yes, your approach looks correct to me. I also had faced similar issues earlier in my project (before hooks were introduced) and had used setState for a boolean variable to enable and disable the button.  

The thing which you need to keep in mind is look out for edge cases related to your business requirements. e.g. suppose a async validation is happening but API gave you 401 or some other status code (i.e. validation didn't happen properly but API gave some response), so should you be enabling the button for user to retry or the button should remain disable.

Hoping that I am able to explain you properly. Please revert if something is not clear to you.