Getting formik dirty values on submit

Formik is a react library to build forms, you register the values and send them in your onSubmit function. If you have an API Route that does a put, everything goes right, but you send more data than necessary in a patch.

So, how to get only dirty values in formik?

To do this, we need to compare it's current value on submit with it's initial value.

Let's start configuring formik data:

type PersonParams = {
  name: string;
  age: string;
};

const person = {
  name: 'vinicius',
  age: '19',
};

const Component = () => {
  const onSubmit = async (values: PersonParams) => {
    const payload = values;
  }

  const formik = useFormik<PersonParams>({
    initialValues: {
      name: person.name,
      age: person.age,
    },
    onSubmit,
  });

  const { initialValues } = useFormik(formik)
};

The form starts with name = 'vinicius' and age = 19. Now, imagine the user changes age to 20 and submits the form. All fields will be sent, including name which has not been changed.

Now let's create a function to get only dirty values:

const getDirtyValues = <T>(values, initialObject: T): object => {
  const data = { ...values };
  const keyValues = Object.keys(data);

  const dirtyValues = keyValues.filter(
    (keyValue) => data[keyValue] !== initialObject[keyValue],
  );

  keyValues.forEach((key) => {
    if (!dirtyValues.includes(key)) delete data[key];
  });

  return data;
};

export { getDirtyValues };

The function compares the current value with the initial value, if it is equal, it deletes.

Now instead submit all values, we call getDirtyValues function to get only dirty values.

const onSubmit = async (values: PersonParams) => {
    // payload = { age: '20' }
    const payload = getDirtyValues<PersonParams>(values, initialValues);
  }

That it's all, now we can get only the dirty fields and send them in our patch.

---

Gist: https://gist.github.com/vinibgoulart/845aefd6cd5c086417c7933e6760fbc6

---

See more in zettelkasten

---

Foto de No Revisions na Unsplash