validate function invoke every time even if it is from other field changing and send count less API calls.

[sizarcorpse]

Problems:

1. isUsernameAvailable invoke and send api request on every key press.
2. isUsernameAvailable also invoke and send api request when other field value is changing on every key press.

Goal:

1. I want to reduce api calls. it would be better if when a user done input then isUsernameAvailable will invoke and send api request and show error message it username is taken.

FYI:

• i am using mode: "onBlur"

Crying for Help:

Please anyone could help me with this issue or at least give me some idea to resolve this.
Thank you.

<input
  id="username"
  disabled={isLoading}
  {...register("username", {
    required: {
      value: true,
      message: "Username is required",
    },
    minLength: {
      value: 3,
      message: "Username must be at least 3 characters",
    },
    maxLength: {
      value: 16,
      message: "Username must be less than 16 characters",
    },
    pattern: {
      value: /^(?!^\d)[a-z0-9_.]{1,15}$/i,
      message: "Username must be alphanumeric",
    },
    validate: {
      isUsernameAvailable: async (value) => {
        const res = await fetch(
          `${process.env.NEXT_API_URL}/user/check?username=${value}`
        );
        const isAvailable = await res.json();
        if (isAvailable.data && value !== user.data.username) {
          return `${value} is already taken`;
        }
      },
    },
  })}
  placeholder="Username"
  type="text"
  className={inputFieldStyles(errors, "username")}
/>;

[leapful]

@sizarcorpse

Please provide a codesandbox url to re-produce the issue. Based on the description, it would be better to apply debounce on change if the input element first to avoid multiple API calls.