كيف تحافظ على الحالة وتقوم بإعادة تحميلها؟

Question

Accepted Answer

**الحفاظ على** الحالة يعني حفظها في التخزين (localStorage أو IndexedDB أو backend) بحيث تبقى بعد إعادة تحميل الصفحة أو الجلسات؛ **إعادة التحميل** تعني تحميلها مرة أخرى في التطبيق عند البدء. شائعة للعربات والرموز المصرح بها وتفضيلات المستخدم والنماذج المسودة.

## persist + hydrate الأساسي مع localStorage

```jsx
function useCart() {
  // HYDRATE: initialize from storage (lazy initializer runs once)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse stored JSON
    } catch {
      return [];                                   // guard against corrupt data
    }
  });

// PERSIST: write to storage whenever it changes
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

النصفان: قراءة وتحليل عند البدء (hydrate)، وتسلسل وكتابة عند التغيير (persist).

## دعم المكتبات

```js
// Zustand persist middleware — automatic persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist for Redux; both handle serialization + rehydration
```

## اختيار التخزين

```text
localStorage  → simple, synchronous, ~5–10MB, strings only (JSON) — preferences, small state
sessionStorage→ like localStorage but cleared when the tab closes
IndexedDB     → large/structured data, async — offline apps, big caches
Cookies       → sent to server; for auth (httpOnly for security)
Backend       → cross-device sync, source of truth for important data
```

## التحذيرات المهمة

```text
⚠️ SSR mismatch: localStorage doesn't exist on the server → guard with typeof window,
   and beware hydration mismatches between server-rendered and client state.
⚠️ Versioning/migration: stored shape may differ from new code → version it and migrate.
⚠️ Don't persist sensitive data (tokens) in localStorage (XSS-readable) — prefer httpOnly cookies.
⚠️ Don't persist server state you can refetch (let React Query handle caching).
⚠️ Validate/guard on hydrate — stored data can be stale or corrupt.
```

## لماذا يهم

الحفاظ على البيانات يوفر قيمة تجربة مستخدم حقيقية — العربات تبقى بعد إعادة التحميل، التفضيلات والمسودات لا تضيع، المستخدمون يبقون مسجلين دخولاً.

لكن التنفيذ الساذج يقدم مشاكل دقيقة وخطيرة: عدم تطابق hydration في SSR، وبيانات قديمة/تالفة، وانقطاع هجرة Schema، و**مخاطر أمنية** (حفظ الرموز في تخزين قابل للقراءة من XSS).

معرفة نمط persist/hydrate، واختيار التخزين المناسب للبيانات، واحترام التحذيرات (الحماية من SSR، إصدار Schema، عدم تخزين الأسرار بشكل غير آمن، عدم الحفاظ على حالة server يمكن إعادة جلبها) هو ما يجعل الحفاظ على البيانات قوياً بدلاً من أن يكون مصدراً لأخطاء يصعب تشخيصها.