Form Validation scenarios on Nested Fields with React Final Form and Async Validator Issues
I just started working with I'm optimizing some code but I've been banging my head against this for hours. I'm trying to figure out I'm using React Final Form for managing my forms, and I'm working with an scenario with asynchronous validation on nested fields. My form has a structure where each section has nested fields, and I want to validate a specific field asynchronously against an API to check if the value is unique. However, the validation triggers on every keystroke, and I'm getting inconsistent behavior messages. Here's the setup I have: ```javascript import React from 'react'; import { Form, Field } from 'react-final-form'; import { validateUniqueUsername } from './api'; // This is an async function that checks for uniqueness const MyForm = () => { const onSubmit = async (values) => { console.log('Form Submitted!', values); }; const validate = (values) => { const errors = {}; if (!values.user.username) { errors.user = { username: 'Required' }; } return errors; }; const asyncValidate = async (values) => { const errors = {}; if (values.user.username) { const isUnique = await validateUniqueUsername(values.user.username); if (!isUnique) { errors.user = { username: 'Username is already taken' }; } } return errors; }; return ( <Form onSubmit={onSubmit} validate={validate} asyncValidate={asyncValidate} render={({ handleSubmit, submitting, pristine, form }) => ( <form onSubmit={handleSubmit}> <div> <label>Username</label> <Field name="user.username"> {({ input, meta }) => ( <div> <input {...input} type="text" placeholder="Username" /> {meta.behavior && meta.touched && <span>{meta.behavior}</span>} </div> )} </Field> </div> <button type="submit" disabled={submitting || pristine}>Submit</button> </form> )} /> ); }; export default MyForm; ``` I'm noticing that the async validation seems to fire too frequently, and I sometimes get two behavior messages for the username field. I have also tried adding a debounce to my async validation, but that didn't resolve the scenario. Is there a better way to handle this situation in React Final Form? Am I missing something in the configuration? The version I'm using is `react-final-form@6.5.0`. Thanks for any help! The project is a CLI tool built with Javascript. Is this even possible? My team is using Javascript for this REST API. Could someone point me to the right documentation? For reference, this is a production mobile app. This is happening in both development and production on Ubuntu 22.04. I appreciate any insights!