final-form
Async validation re-renders all fields
Not sure if this is a Final Form Arrays or a Final Form or Yup issue, but posting it here for initial guidance.
Seems that when I have a form with a FieldArray and async validation (Yup), all empty fields in the array re-renders on each keypress in any other field (even outside the array), even if all subscriptions are disabled.
When comparing the meta information for the rendered component, it seems that meta.errors, meta.invalid and meta.valid changes briefly when typing. Given the field is invalid, the field will briefly turn valid and then invalid again, making it re-render even though nothing actually changed.
Changing the validation to sync resolves the issue.
The following sandbox showcases the issue, and includes a sync validator for comparison.
https://codesandbox.io/s/react-final-form-field-arrays-w-async-validation-nlr1i?file=/index.js
What's your environment?
๐ Final Form Arrays version 3.0.2 ๐ Final Form version 4.20.2
May be the same problem๏ผ
you need to add validateFields={[]} to all fields in FieldArray and comany field.
although,add/remove array item making re-render all fields
https://github.com/final-form/react-final-form-arrays/issues/168
https://codesandbox.io/s/new-waterfall-vhlw2?file=/index.js
