Add optional form persistence hook (useFormPersist)

[mahmoud-alaa1]

Many developers need to persist form state across page reloads or app restarts to improve user experience, especially for long forms on web and mobile.
Currently, developers must manually integrate watch() + localStorage (or AsyncStorage on React Native) and handle exclusions, debounce, and type-safe storage themselves.
This can lead to duplicate code and potential bugs/security issues if passwords or files are accidentally persisted.

I would like to introduce an optional persistence hook for React Hook Form, e.g. useFormPersist(form, key, options), which:

• Automatically saves form values to storage (localStorage for web, AsyncStorage for React Native).
• Excludes sensitive fields like passwords and file inputs by default.
• Provides debounce for saving to prevent excessive writes.
• Restores saved values automatically via reset() when the form mounts.
• Allows developers to manually clear persisted data if needed.
• Supports both web and mobile with a unified API.

Example usage:

useFormPersist(form, "signup-form", { exclude: ["password"], debounce: 500 });

Suggested Design

useFormPersist(form: UseFormReturn<T>, key: string, options?: {
  storage?: Storage | AsyncStorage,   // defaults: localStorage (web) or AsyncStorage (RN)
  exclude?: string[],                 // default: ["password", "file*"]
  debounce?: number,                  // default: 300ms
  onHydrated?: (values: Partial<T>) => void, // callback when restoring data
})

• This feature would not persist non-serializable data like File objects or raw passwords.

[QuentinFrc]

Like this:

• No longer maintained https://github.com/tiaanduplessis/react-hook-form-persist
• Pretty new https://github.com/francogabriel92/react-hook-form-storage

Will be cool to have it directly here for sure

[mahmoud-alaa1]

Thanks for sharing those libraries!
I’m definitely interested in contributing this feature myself but before starting any implementation, I’d really like to get approval or guidance from the maintainers to make sure it fits the project’s vision and roadmap

[tatsmaki]

you don't have to use watch to persist values

use resolver alternative:

const customResolver: Resolver = (values) => {
    localStorage.setItem('form', JSON.stringify(values))
}

useForm({
    defaultValues: // get persisted values, 
    resolver: customResolver
})

To cut sensitive stuff:

const replaceSensitive = (key, value) => {
  if (key === "password") {
      return undefined
  }

  return value
}

const customResolver: Resolver = (values) => {
    localStorage.setItem('form', JSON.stringify(values, replaceSensitive))
}

To keep standard schema resolver:

const customResolver: Resolver = (...args) => {
    const values = args[0]
    
    localStorage.setItem('form', JSON.stringify(values))
    
    return zodResolver(yourSchema)(...args);
}

I don't remember if this is mentioned somewhere in the docs, but it is the best way to manage any custom functionality (values persist, warning level validation)