Piyé cara sampeyan ngawetake lan ngisi maneh state?

Question

Accepted Answer

**Ngawetake** state nandheske ngasinake menyang panyimpenan (localStorage, IndexedDB, backend) supaya bisa tahan ing pemuatan ulang kaca utawa sesi; **ngisi maneh** nandheske muati maneh menyang app nalika startup. Umum kanggo kereta, token autentikasi, preferensi pengguna, lan formulir draft.

## Ngawetake lan ngisi maneh dasar nganggo 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];
}
```

Rong setengah: maca lan ngluraske ing init (ngisi maneh), lan serialize-lan-tulis ing owah (ngawetake).

## Dhukungan Perpustakaan

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

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

## Milih panyimpenan

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

## Ing peringatan penting

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

## Napa iku penting

Ngawetake nggawa nilai UX nyata — kereta bisa tahan muatan ulang, preferensi lan draft ora ilang, pangguna tetep melu.

Namun implementasi naif ngenalake masalah halus lan serius: ketidakcocokkan hidrasi SSR, data kusam/rusak, pemecahan migrasi skema, lan **risiko keamanan** (ngawetake token ing panyimpenan sing bisa dibasa XSS).

Ngerti pola awet/hidrasi, milih panyimpenan sing bener kanggo data, lan ngelabuhake peringatan (lindungi SSR, versikan skema, aja nyimpen rahasia kanthi ora aman, aja ngawetake status server sing bisa dijupuk maneh) iku sing nggawe awet iku kokoh tinimbang sumber babagan sing rumit.