Kif tibqgħ u tħaffif l-istat?

Question

Accepted Answer

**Ibqigħ** l-istat jfisser li tħallsu f'storage (localStorage, IndexedDB, backend) sabiex is-sobotta mill-paġni jerida jew sessions; **tħaffif** jfisser li tolqodu mill-ġdid fl-app fil-bidu. Komuni għal karrettaini, tokens ta' awtentikazzjoni, preferenzi tal-utent, u forom draft.

## Ibqigħ u tħaffif bażiku b'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];
}
```

It-tnejn nofkum: aqra-u-analizza fl-init (tħaffif), u serializza-u-ikteb fuq bidla (ibqigħ).

## Appoġġ tal-librerija

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

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

## L-għażla ta' storage

```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
```

## Il-āwarniet importanti

```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.
```

## Għaliex hu importanti

L-Ibqigħ jipprovdi valur reali ta' UX — il-karrettaini jifdlu minn jerida, preferenzi u drafts mhumiex mitlufa, l-utenti jibqgħu loggati.

Iżda implementazzjoni ingenwa tintroduċi problemi sottili u serijużi: mismatches ta' SSR hydration, data qadima/korrotta, tħassir ta' migrazjoni tal-iskema, u **riskji ta' sigurtà** (ibqigħ ta' tokens f'storage li tista' titqira minn XSS).

L-għarfien tal-pattern ibqigħ/tħaffif, l-għażla ta' storage tajba għad-data, u r-rispett tal-āwarniet (protezzjoni għal SSR, verżjoni tal-iskema, tpersonna't segrets b'mod mhux sigur, tpersonna't istat tas-server li jista' jitqigħ mill-ġdid) hu dak li jagħmel l-ibqigħ robustu minflok sors ta' bugs diffiċli biex tidiagnoza.