How to correctly implement auto save using watch API?

[Jervx]

I made a custom hook useAutoSave which is used on my form component.

bank-create-update-form.tsx - This form handles both create mutation & update mutation. Everytime successful create/update mutation I reset the form via form.reset(dataFromMutationResponse)

const BankCreateUpdateForm = ({ className, ...formProps }: IBankFormProps) => {
    const form = useForm<TBankFormValues>({
        resolver: standardSchemaResolver(BankSchema),
        reValidateMode: 'onChange',
        mode: 'onSubmit',
        defaultValues: {
            name: formProps.defaultValues?.name || '',
            description: formProps.defaultValues?.description || '',
            media: formProps.defaultValues?.media,
            media_id: formProps.defaultValues?.media_id,
        },
    })

    // ...other stuff/ api mutations

    useAutoSave({
        form,
        onSave: () => console.log('auto save called by autoSave()'), // api mutation call
        delay: 2000,
    })

    return (
        // ...UI
    )
}

use-auto-save.ts

type AutoSaveProps<T extends FieldValues> = {
    delay?: number
    form: UseFormReturn<T>
    onSave: (data: T) => void | Promise<void>
}

export function useAutoSave<T extends FieldValues>({
    delay = 1000,
    form,
    onSave,
}: AutoSaveProps<T>) {
    const timer = useRef<ReturnType<typeof setTimeout> | null>(null)

    console.log('outside', form.formState.isDirty, form.formState.dirtyFields)

    useEffect(() => {
        const subscription = form.watch(() => {
            console.log(
                'Watch Subs: ',
                form.formState.isDirty,
                form.formState.dirtyFields
            )

            if (timer.current) {
                clearTimeout(timer.current)
            }

            timer.current = setTimeout(() => {
                const { isDirty, dirtyFields } = form.formState

                const hasNoChanges =
                    !isDirty || Object.keys(dirtyFields).length === 0

                console.log('watch:timeout', {
                    isDirty,
                    dirtyFields,
                    hasNoChanges,
                })

                if (hasNoChanges) return

                onSave(form.getValues())
            }, delay)
        })

        return () => {
            subscription.unsubscribe()
            if (timer.current) clearTimeout(timer.current)
        }
    }, [
        delay,
        onSave,
        form,
        form.formState.isDirty,
        form.formState.dirtyFields,
    ])
}

I always rely on the form state since I provide defaultValues via props (initial data), and I call form.reset() after a successful response.

The issue I’m facing is that when I type a single character into an input:

Typing 'A' → does not trigger autoSave

Typing 'B' (making it "AB") → autoSave is triggered

So the first input change isn’t being detected properly.

simplescreenrecorder-2025-09-24_13.57.26.mp4

As a temporary workaround, I created a headless component that uses useWatch. Placing it as a separate component prevents unnecessary re-renders of the entire form, and it works correctly.

However, I’d like to know if there’s a way to make form.watch handle this properly without needing to rely on external packages to check isDirty/dirtyFields.

Thanks!