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!

[tamish-max]

Honestly, the headless <AutoSave /> using useWatch is not a workaround here — it’s the RHF-friendly way to do it.

The callback form of watch() is fine for notifications, but your code also reads form.formState.isDirty / dirtyFields inside that subscription. Those formState values are proxy/subscription-based, so on the first keystroke it’s easy to read a stale snapshot and miss the save.

I’d split the subscriptions explicitly:

function AutoSave<T extends FieldValues>({
  control,
  onSave,
  delay = 1000,
}: {
  control: Control<T>
  onSave: (values: T) => void | Promise<void>
  delay?: number
}) {
  const values = useWatch({ control }) as T
  const { isDirty, dirtyFields } = useFormState({ control })

  useEffect(() => {
    if (!isDirty || Object.keys(dirtyFields).length === 0) return

    const id = setTimeout(() => {
      void onSave(values)
    }, delay)

    return () => clearTimeout(id)
  }, [values, isDirty, dirtyFields, delay, onSave])

  return null
}

Then render <AutoSave control={form.control} onSave={...} /> inside the form.

That subscribes to exactly the pieces autosave cares about, without resubscribing the whole form every time formState changes.

[DaCameraGirl]

The bug is caused by a stale closure over form.formState. Here's what's happening and the clean fix.

Root Cause: formState is a Proxy, and you're reading it stale

In RHF, form.formState is a reactive proxy. When you read form.formState.isDirty inside the watch callback, you're getting the value at the time the callback fires — but the isDirty/dirtyFields update triggered by the first keystroke hasn't propagated yet when your callback runs. This is a known timing issue: watch fires synchronously on change, but formState dirty tracking updates asynchronously as part of React's render cycle.

The result: on the first keystroke, watch fires but isDirty is still false. On the second keystroke, isDirty is now true from the first change, so the save fires — one event behind.

Fix: Don't gate on isDirty inside the watch callback

The watch subscription already tells you the value changed. You don't need isDirty to gate it — instead, compare the current values against the defaultValues:

export function useAutoSave<T extends FieldValues>({
  delay = 1000,
  form,
  onSave,
}: AutoSaveProps<T>) {
  const timer = useRef<NodeJS.Timeout | null>(null);
  const defaultValues = useRef(form.formState.defaultValues);

  useEffect(() => {
    const subscription = form.watch((values) => {
      // `values` is the current form state — no stale closure issue
      if (timer.current) clearTimeout(timer.current);

      timer.current = setTimeout(() => {
        // Compare against captured defaultValues to skip saving unchanged forms
        const hasChanges = Object.keys(values).some(
          (key) => values[key] !== (defaultValues.current as Record<string, unknown>)?.[key]
        );

        if (!hasChanges) return;
        onSave(form.getValues() as T);
      }, delay);
    });

    return () => {
      subscription.unsubscribe();
      if (timer.current) clearTimeout(timer.current);
    };
  }, [delay, onSave, form]);
  // Note: NO form.formState.isDirty in deps — that was causing re-subscription on every keystroke
}

The deeper issue in your original code

You also had form.formState.isDirty, form.formState.dirtyFields in the useEffect dependency array. This means every time dirty state updates (every keystroke), React tears down and re-creates the subscription. The new subscription misses the current event that triggered the tear-down. Removing those from deps and using the values passed directly by watch fixes both the one-behind bug and the unnecessary re-subscription.

If you need to update defaultValues after a successful save

After a successful mutation, call form.reset(savedData) — this updates RHF's internal defaultValues, so the next diff is against the newly saved state (prevents re-saving on the next keystroke after a successful auto-save):

onSave: async (values) => {
  await updateMutation.mutateAsync(values);
  form.reset(values); // update baseline so next watch diff is clean
},