setFieldValue shouldValidate validates whole form instead of the given field

[runoncedev]

I'm calling setFieldValue with shouldValidate (docs):

setFieldValue('foo', 'bar', true)

And it seems to be validating the whole form instead of just foo field, is this the expected behavior?

As a workaround I tried using validateField:

setFieldValue('foo', 'bar')
validateField('foo')

But validateField doesn't have acess to the updated value of foo, so it won't work.

Any suggestions? I'm using v2.2.10 with validationSchema.

[harshagarwalnyu]

Yeah, that is the expected behavior. When you pass true to setFieldValue, Formik triggers a full form validation cycle. This happens because most validation schemas (especially Yup) can have cross-field dependencies, so Formik re-runs everything to ensure the entire errors object is perfectly in sync with the new state.

The reason validateField felt like it was using the old value is that setFieldValue is asynchronous. When you call them back-to-back, the validation runs before React has finished flushing the state update.

The trick is to wait for the state update to resolve. Since setFieldValue returns a Promise in newer versions of Formik, you can chain them:

// Update without validating immediately, then validate specifically
setFieldValue('foo', 'bar', false).then(() => {
  validateField('foo');
});

However, the most idiomatic Formik way is to just let the full validation run but only show the error once the field is marked as touched. This prevents the user from seeing irrelevant errors while keeping your state consistent:

// Standard approach: validate everything but control UI with 'touched'
setFieldValue('foo', 'bar', true);
setFieldTouched('foo', true, false);

// UI
{errors.foo && touched.foo && <div>{errors.foo}</div>}

This keeps your code simple and avoids fighting Formik's internal reconciliation.