How can I handle asynchronous validation in React forms?

How can I handle asynchronous validation in React forms?

You can handle asynchronous validation in React by using state to manage form inputs and validation results. You can create a function that checks the validity of the input asynchronously, such as checking if a username is already taken.

Can you show me an example of how to implement that?

Sure! You can use the useEffect hook to trigger validation when the input changes. Here's a simple example:

const [username, setUsername] = useState('');
const [isValid, setIsValid] = useState(null);

useEffect(() => {
  const validateUsername = async () => {
    const response = await fetch(`/api/validate-username?username=${username}`);
    const data = await response.json();
    setIsValid(data.isValid);
  };

  if (username) {
    validateUsername();
  }
}, [username]);

What if I want to show a loading indicator while validating?

You can add a loading state to your component. Set it to true when the validation starts and false when it finishes. Here's how you can modify the previous example:

const [loading, setLoading] = useState(false);

useEffect(() => {
  const validateUsername = async () => {
    setLoading(true);
    const response = await fetch(`/api/validate-username?username=${username}`);
    const data = await response.json();
    setIsValid(data.isValid);
    setLoading(false);
  };

  if (username) {
    validateUsername();
  }
}, [username]);