javascript: disable a form button while executing an http request

I have a form built with react, formik and yup, and this form has some asynchronous validations. Apparently, some users were able to skip these validations, and to avoid some errors, I wanted to disable the submit button when there is 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 in which I used the useEffect link to establish a state in case an http request was executed, and the way I am detecting this is what your opinion wanted.


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

const Form = props => {
  const (disableSubmitBtn, setDisableSubmitBtn) = useState(false);

  useEffect(() => {
      configs => {
        console.log('http req running');
        return configs;
      error => {
        return Promise.reject(error);
    console.log('no http req running');
  }, (disableSubmitBtn));

  return (
{ props.handleSubmit(e); }} > {props.settings.bonuscode && (
); }; export default Form;

So, what really matters is the code inside the useEffect hook. How about?
Is it okay to verify pending HTTP requests in this way?