useAutoSave
A robust hook for auto-saving form data with debouncing, race-condition handling, and lifecycle safety.
Installation
npx sse-tool add use-auto-save
npm install sse-hooks
Usage
import { useAutoSave } from "./{hooks file}";
const { data, onChange, isSaving } = useAutoSave(
{ title: "My Draft", content: "", isOpen: true },
async (cleanData) => {
// 'isOpen' is excluded, so cleanData only has title and content
await api.saveDraft(cleanData);
},
{ delay: 2000, exclude: ["isOpen"] },
);
return (
<input
value={data.title}
onChange={onChange("title")} // Handles event automatically
/>
);
import { useAutoSave } from "sse-hooks";
const { data, onChange, isSaving } = useAutoSave(
{ title: "My Draft", content: "", isOpen: true },
async (cleanData) => {
// 'isOpen' is excluded, so cleanData only has title and content
await api.saveDraft(cleanData);
},
{ delay: 2000, exclude: ["isOpen"] },
);
return (
<input
value={data.title}
onChange={onChange("title")} // Handles event automatically
/>
);
API
Parameters
| Name | Type | Description |
|---|---|---|
| initialData | T | The initial state of the data object. |
| onSave | Function | The async function to call when data changes. Receives the clean data payload. |
| config | any | Configuration options. |
Return Value
Returns UseAutoSaveReturn.
Object containing data, setters, and saving state.
Changelog
81fa5 — feat: add useAutoSave and useCallbackRef hooks with comprehensive documentation