Async Rules

Check a username against the server while the user types, and show errors that only the server can find after a submit.

What this shows

validateUsername is an async function. While it runs, the field's isValidating is true and the field shows "Checking…". See Async validation.
debounceValidation={400} waits until typing pauses for 400 ms before validating, so the server isn't asked about every keystroke. If an older check finishes after a newer one, its result is ignored.
On submit, handleSubmit waits for pending async validators before calling onSubmit. The button reads formState.isValidating and formState.isSubmitting to show what's happening.
The server rejects @example.com addresses. onSubmit shows that error on the email field with setError, and returns false so the edits are kept. See Errors from the server.

The TextField component comes from the shared example components.