Save on Change for React Hook Form

useSaveOnChange.ts

import debounce from "debounce";
import { useCallback } from "react";
import { useWatch, type UseFormReturn, type FieldValues } from "react-hook-form";
import useDeepCompareEffect from "use-deep-compare-effect";

export const useSaveOnChange = <T extends FieldValues = FieldValues>(
  form: UseFormReturn<T>,
  onSubmit: (data: T) => void
) => {
  const watchedData = useWatch({
    control: form.control,
  });

  const debouncedSave = useCallback(
    debounce(() => {
      void form.handleSubmit(onSubmit)();
    }, 1000),
    []
  );

  useDeepCompareEffect(() => {
    if (form.formState.isDirty) {
      debouncedSave();
    }
  }, [watchedData]);
};