Proposal: useFormPersist hook

[mahmoud-alaa1]

I think it would be really helpful to have a simple way to persist form state in TanStack Form.

Right now, if you want your form data to survive a page reload or app restart, you have to manually subscribe to form changes, save them to localStorage or AsyncStorage, handle debounce, exclude sensitive fields, and restore them again when the form mounts. It’s doable but super repetitive and easy to mess you.

My idea is adding an optional hook called useFormPersist(form, key, options) that automatically saves and restores form values.
It could work on both web and React Native.

Example

import { useForm } from '@tanstack/react-form'
import { useFormPersist } from '@tanstack/form-persist'

const form = useForm({
  defaultValues: { name: '', email: '' },
})

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

Suggested Design

useFormPersist<T>(
  form: FormApi<T>,
  key: string,
  options?: {
    storage?: Storage | AsyncStorage
    exclude?: string[] // default: ['password', 'file*']
    debounce?: number // default: 300ms
    onHydrated?: (values: Partial<T>) => void
  }
)

It would just:

• Save form values to storage (localStorage for web, AsyncStorage for RN)
• Restore them when the form mounts
• Exclude unsafe fields by default
• Let you manually clear storage if needed
• Of course, it wouldn’t persist things like File objects or passwords.