import { useMemo } from "react"; import { useFormPersistence } from "./useFormPersistence"; import { FormPersistenceConfig } from "./types"; import { ReformReturn } from "../../types"; /** * Hook wrapper for form persistence in Reform forms * * @template T - The type of form data * @param reform - Reform hook return value * @param config - Configuration for form persistence * @returns Form persistence state and methods * * @example * // Basic usage * const reform = useReform({...}); * const persistence = useReformPersistence(reform, { * enabled: true, * storageKey: "user-form", * autoSave: true * }); * * // Manual save * */ export const useReformPersistence = >( reform: ReformReturn, config: FormPersistenceConfig = {} ) => { // Memoize config to prevent unnecessary re-renders const memoizedConfig = useMemo( () => ({ enabled: config.enabled ?? false, storageKey: config.storageKey ?? "reform-form-state", storageProvider: config.storageProvider, autoSave: config.autoSave ?? false, autoSaveInterval: config.autoSaveInterval ?? 5000, debounceAutoSave: config.debounceAutoSave ?? true, debounceDelay: config.debounceDelay ?? 500, onBeforeSave: config.onBeforeSave, onAfterSave: config.onAfterSave, onAfterRestore: config.onAfterRestore, metadata: config.metadata, }), [ config.enabled, config.storageKey, config.storageProvider, config.autoSave, config.autoSaveInterval, config.debounceAutoSave, config.debounceDelay, config.onBeforeSave, config.onAfterSave, config.onAfterRestore, // Use JSON.stringify for complex objects to compare by value typeof config.metadata === "function" ? config.metadata : JSON.stringify(config.metadata), ] ); // Use the optimized form persistence hook with memoized config return useFormPersistence(reform, memoizedConfig); };