How do you automatically save form drafts (Auto-save) to prevent users from losing their input?

Short answer

Observe form values with Debounce and save them automatically in localStorage or send them to the server in the background; remove the draft after the final submission succeeds.

Explanation

To protect users' work from accidental closure or connection loss, observe changes and delay saving until they have stopped typing for a set time (such as two seconds). When the component opens again, restore the draft and offer the user a choice to continue or clear it and start over.

Code example

useEffect(() => {
  const subscription = watch((values) => {
    const timer = setTimeout(() => {
      localStorage.setItem('form_draft', JSON.stringify(values));
    }, 1500);
    return () => clearTimeout(timer);
  });
  return () => subscription.unsubscribe();
}, [watch]);

Common mistakes

• Saving sensitive passwords or credit card numbers as unencrypted drafts in localStorage.

Follow-up questions

• How do you prevent double clicks and repeated form submissions (Double Submissions)?

Sources

• MDN — Window: localStorage