Autosave hook for react-hook-form

use-auto-save.ts

import { useCallback } from 'react'

import { debounce } from 'lodash-es'
import { useWatch } from 'react-hook-form-mui'
import type { useForm } from 'react-hook-form-mui'

import { useDeepEffect } from '@/hooks/use-deep-effect'

const useAutoSave = (context: ReturnType<typeof useForm>, onSubmit: (data: unknown) => void) => {
  const watch = useWatch({ control: context.control })
  const { dirtyFields } = context.formState
  const hasDirtyFields = Object.keys(dirtyFields).length > 0

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const debouncedSave = useCallback(
    debounce(() => {
      context.handleSubmit(onSubmit)()
    }, 500),
    [],
  )

  useDeepEffect(() => {
    if (hasDirtyFields) {
      debouncedSave()
    }
  }, [watch])
}

export { useAutoSave }