formik - get dirty values

getDirtyValues.ts

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 };

example:

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

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

const Component = () => {
  const onSubmit = async (values: PersonParams) => {
    // age was changed, but the name is the same
    // { name: "vinicius", age: "20" }
    console.log(values);

    const payload = getDirtyValues<PersonParams>(values, initialValues);
    // { age: "20" }
    console.log(payload);
  }
  
  const formik = useFormik<PersonParams>({
    initialValues: {
      name: person.name,
      age: person.age,
    },
    onSubmit,
  });

  const { initialValues } = useFormik(formik)
};