final-form / react-final-form-arrays

A component for rendering and editing arrays 🏁 React Final Form
MIT License
205 stars 70 forks source link

FormSpy errors are different during every render, even if nothing changes #134

Open ThiefMaster opened 4 years ago

ThiefMaster commented 4 years ago

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

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.

tjb042 commented 3 years ago

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.