react-final-form-arrays

react-final-form-arrays copied to clipboard

Take this example: https://codesandbox.io/s/react-final-form-field-arrays-p7ntw?file=/index.js

• Add a row and leave it empty (to have failing validation in the array element).
• Type something in the company field outside the array
• onChange of the FormSpy that is only subscribed to errors fires on every keypress in that field as long as the array contains any errors

Combined with a setState in the onChange callback this can easily result in a react update loop freezing the app.

Expected behavior: onChange only triggering when there's an actual change.

I realize this is rather old at this point but thought it may be worth an attempt to answer for those coming across this.

By default anytime a field changes every field will be validated at the same time. This seems to be true in this example because changing the value of the company field is retriggering validation on the customers field which causes the errors state to be updated (thus triggered the FormSpy subscriber).

You can change this behavior by providing a validateFields prop on a Field; see: validateFields. Providing an empty array to the validateFields prop means that no other fields will be be re-validated when this one changes.

Applying that to this example, if we set validateFields={[]} on the company field then validation won't be re-triggered on the customers field for every change to the company state.