Workaround for FieldArray not updating isValid?

[tyteen4a03]

Is there a workaround for this issue? #1616

I know there's this comment but I'm confused as to where it goes and how it replaces my normal remove().

[harshagarwalnyu]

The issue (#1616) is that FieldArray.remove() mutates the values array but doesn't always trigger a full validation rerun in older Formik versions. Here's the working workaround:

Replace arrayHelpers.remove(index) with a manual remove + validateForm:

import { useFormikContext, FieldArray } from 'formik';

function MyFieldArray() {
  const { values, validateForm } = useFormikContext();

  return (
    <FieldArray name="items">
      {(arrayHelpers) => (
        <div>
          {values.items.map((item, index) => (
            <div key={index}>
              <Field name={`items.${index}.name`} />
              <button
                type="button"
                onClick={async () => {
                  arrayHelpers.remove(index);
                  // Force revalidation after removal
                  await Promise.resolve(); // wait one tick for state to update
                  validateForm();
                }}
              >
                Remove
              </button>
            </div>
          ))}
          <button type="button" onClick={() => arrayHelpers.push({ name: '' })}>
            Add
          </button>
        </div>
      )}
    </FieldArray>
  );
}

Why await Promise.resolve(): Formik's state update is async (React setState). Calling validateForm() synchronously after remove() runs on the stale values. One microtask tick lets the state settle.

Alternative — use the validate prop on the FieldArray:

<FieldArray
  name="items"
  validate={(items) => {
    // runs on every change including removes
    if (!items || items.length === 0) return 'At least one item required';
  }}
>

The validate prop fires on every render of the field, so isValid stays accurate after removes without manual validateForm() calls.