I have a case that: when the user changes the input, with each change, I have to send an HTTP request to get some data from the server. when I get the data I update my state with new data and that, of course, affects the view. so, the problem is when the user changes the input very fast the requests don't fulfill respectively and this leads to an improper view at the end. so, I want to not send the request until the previous one is fulfilled.

const parallel = (...Promises) => {
  return Promise.all(Promises);
};

export function parentAccHandler(e, inputFiled) {
  const parentAccValue = e.target.value;
  const { fields } = this.state;
  parallel(
    getUsedRecord(fields),
    axios.get(`chartofaccounts/nextPK/${parentAccValue}`)
  )
    .then(([usedRecord, nextPkRes]) => {
      this.setState((state, props) => {
        const { fields } = state;
        fields.acc_no.value = nextPkRes.data.next_PK
          ? nextPkRes.data.next_PK
          : "";
        return {
          fields: updateOnParentAcc.call(this, fields, usedRecord, "PRESENT"),
        };
      });
    })
    .catch((err) => {
      this.setState((state, props) => {
        let { fields } = state;
        fields.acc_no.value = "";
        fields.parent_acc.prevReqStatus = "FULFILLED";
        if (parseInt(parentAccValue) === 0) {
          fields = updateOnParentAcc.call(this, fields, null, "ZERO");
        } else {
          fields = updateOnParentAcc.call(this, fields);
        }
        return {
          fields: fields,
        };
      });
    });
}