How can I implement async validation in my React app?

How can I implement async validation in my React app?

You can use libraries like Formik or React Hook Form along with a validation library like Yup to handle async validation.

Can you show me a code example?

Sure! Here's a simple example using Formik and Yup:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email')
    .test('checkEmail', 'Email already in use', async (value) => {
      const response = await fetch(`/api/check-email?email=${value}`);
      const data = await response.json();
      return data.available;
    })
    .required('Email is required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => { console.log(values); }}
  >
    {() => (
      <Form>
        <Field name="email" type="email" />
        <ErrorMessage name="email" component="div" />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

This code checks if the email is already in use asynchronously.

What if I want to validate multiple fields asynchronously?

You can create multiple tests in your Yup schema for different fields. Just ensure each test returns a promise that resolves to true or false.