Race conditions in Yup validations

[fbolcic]

Hello,

First of all thank you for all the great effort behind this amazing library. We have been using it for months and it makes our form development a breeze!

We have a problem with race conditions in our validation logic. We are using yup for validation and have a scheme witch validates domain names. Our logic looks something like this:

const domainSchema = yup.string().test('is-valid-domain', async (value, context) => {
  // throw error if domains have less than 3 characters
  if (!value || value.length < 3) {
    return context.createError({ message: 'Please use domain names that are 3 characters or longer' });
  }

  //  check if the domain is already taken via a BE request
  const [response, error] = await tryCatch(() => checkDomainAvailabilityOnBe(value as string));
  if (error || !response?.domainAvailable) {
    return context.createError({ message: 'Someone is already using this domain. Do you have other ideas?' });
  }

  return true;
});

So we are first checking if the domain is of required length, and if yes, if it is available via a fetch request.

The problem arises because the BE check obviously takes longer to resolve, which can lead to it overriding the last validation result. It can be best seen on the following video:

Screen.Recording.2023-12-19.at.08.54.14.mov

So we have two "states" here with two validation results:

1. The "gol" input is 3 chars long so it will pass the length check and validate against BE. It resolves to true
2. The "go" input is 2 chars long so it will not pass the length check and resolve to false immediately

On the first couple of tries, where I am typing slowly, you can see that this resolves as expected. I type in "gol" and it resolves to true. I then type "go" and it resolves to false.

But if I type more quickly the BE input can override the length inputs. This is because:

1. I type in "gol" and the fetch request triggers. Validation pauses execution until we get a response
2. I then type "go" and it resolves to false
3. The BE request for the "gol" input then resolves and returns true. This result is then taken as the validation result

How can we solve for race conditions here? Theoretically, I would expect for the next validation try to cancel the last ones (if they have still not resolved).

Thank you for your patience and help in advance 🙏