تكرار السؤال: …
الإجابة المختصرة
عبر مراقبة قيم النموذج بالـ Debounce وحفظها في localStorage أو إرسالها للخادم في الخلفية تلقائياً، مع تنظيف المسودة فور نجاح التقديم النهائي.
الشرح
لحماية جهد المستخدم من الإغلاق المفاجئ أو انقطاع الاتصال، نقوم بمراقبة التغييرات وتأخير عملية الحفظ لفترة زمنية (مثل ثانيتين من توقف الكتابة). عند فتح المكون مجدداً، يتم استرجاع المسودة وعرض إشعار للمستخدم يتيح له المتابعة أو مسح المسودة والبدء من جديد.
مثال بالكود
useEffect(() => {
const subscription = watch((values) => {
const timer = setTimeout(() => {
localStorage.setItem('form_draft', JSON.stringify(values));
}, 1500);
return () => clearTimeout(timer);
});
return () => subscription.unsubscribe();
}, [watch]);أخطاء شائعة
- حفظ كلمات المرور أو أرقام البطاقات الائتمانية الحساسة في الـ localStorage كمسودات غير مشفرة.