FieldArray runs UI-blocking "validateFormWithHighPriority" on every change

[MaximSagan]

🐛 Bug report

Current Behavior

Internally, Formik has two different functions to trigger validation, validateFormWithLowPriority and validateFormWithHighPriority.

• validateFormWithLowPriority is used internally on setValues, setFieldValue, setTouched, setFieldTouched, and validateOnMount.

• validateFormWithHighPriority is

  • used internally on submitForm.
  • exposed in Formik's "public API" aliased as validateForm (exposed both as part of the imperativeMethods object that is available to onSubmit and onReset callbacks, and as part of the main Formik context that is received by Formik's render props and when useFormikContext is called).

This publicly available validateForm (alias of validateFormWithHighPriority) which is part of Formik context is called in one location by Formik itself: inside FieldArray's componentDidUpdate method here. validateForm is run whenever the target array of FieldArray is updated (or more specificially when its reference is updated) as long as validateOnChange is true (which is the default setting).

We can see how often it gets called by looking at the following sandbox, where I am logging each time validateForm is called:

https://codesandbox.io/s/formik-fieldarray-high-priority-validation-v598j

Note how validateForm (alias for validateFormWithHighPriority) is called any time fields declared inside FieldArray array update, but not when the field outside the form is updated.

This call to validateWithHighPriority blocks the UI thread and can be extremely detrimental to the performance of larger forms. I should probably investigate this further, but I'm not quite sure why this needs to be called if updateValues/updateFieldValue already run validation (albeit with "low priority").

Expected behavior

The use of FieldArray should not cause UI-blocking validation on every keystroke.

Reproducible example

https://codesandbox.io/s/formik-fieldarray-high-priority-validation-v598j (referred to above)

Suggested solution(s)

Remove this explicit call by FieldArray to validateForm if unnecessary, or perhaps replace it with low-priority validation if necessary.

Your environment

See CodeSandbox example.

[darbio]

Is there a workaround for this? I'm facing issues with a really simple (two repeating values) form which makes the UX terrible.

[lukasrakauskas]

Is there a workaround for this? I'm facing issues with a really simple (two repeating values) form which makes the UX terrible.

For me, setting validateOnChange to false brought acceptable level of performance back.

[gwooly]

@lukasrakauskas suggestion seems to solve the input delay. Even if you manually call validateField or validateForm each time one of the field array values changes (or you add / remove items from the field array) then it's far more performant.