Unaweza kueneza na kuumba hali yake vipi?

Question

Accepted Answer

**Kueneza** hali inamaanisha kuiokeza katika hifadhi (localStorage, IndexedDB, backend) ili ikasurvive upakuaji wa ukurasa au kipindi; **kuumba** inamaanisha kuipakia tena kwenye programu wakati wa kuanza. Kawaida kwa karata, tokens ya authentication, mapenzi ya watumiaji, na fomu za rasimu.

## Kueneza msingi + kuumba kwa 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];
}
```

Nusu mbili: kusoma-na-kuchambua katika kuanzisha (kuumba), na kuserialization-na-kuandika katika mabadiliko (kueneza).

## Msaada wa Maktaba

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

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

## Kuchagua hifadhi

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

## Onyo za muhimu

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

## Kwa nini ni muhimu

Kueneza hutoa thamani halisi ya UX — karata zinakasurvive upakuaji, mapenzi na rasimu hazinapotezwa, watumiaji hubaki kuloginia.

Lakini kutekeleza kwa ujinga kuleta matatizo mahitilafu, makubwa: matatizo ya SSR hydration, data iliyochakaa/iliyoharibika, kushindwa kwa mgogoro wa schema, na **hatari za usalama** (kueneza tokens katika hifadhi inayoweza kusomwa na XSS).

Kujua muundo wa kueneza/kuumba, kuchagua hifadhi sahihi kwa data, na kuheshimu onyo (kulinda kutokana na SSR, kutengeneza schema, usieneze serikali halisi zisizosigika, usieneze hali ya server inayoweza kufetched) ndilo linalofanya kueneza kuwa imara badala ya chanzo cha matatizo yasiyoweza kudiagnoza.