Bagaimana Anda bertahan dan menghidrasi keadaan?

Question

Accepted Answer

**Mempertahankan** keadaan berarti menyimpannya ke penyimpanan (localStorage, IndexedDB, backend) sehingga bertahan pada pemuatan ulang halaman atau sesi; **rehidrasi** berarti memuat kembali ke aplikasi saat startup. Umum untuk keranjang, token otentikasi, preferensi pengguna, dan formulir draf.

## Pertahankan dasar + rehidrasi dengan 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];
}
```

Dua bagian: baca dan parse pada inisialisasi (rehidrasi), dan serialisasi-tulis pada perubahan (pertahankan).

## Dukungan perpustakaan

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

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

## Memilih penyimpanan

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

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

## Mengapa ini penting

Pertahanan memberikan nilai UX nyata — keranjang bertahan pada pemuatan ulang, preferensi dan draf tidak hilang, pengguna tetap masuk.

Tapi implementasi naif memperkenalkan masalah halus dan serius: ketidaksesuaian rehidrasi SSR, data basi/rusak, kerusakan migrasi skema, dan **risiko keamanan** (mempertahankan token dalam penyimpanan yang dapat dibaca XSS).

Mengetahui pola persist/rehidrasi, memilih penyimpanan yang tepat untuk data, dan menghormati peringatan (lindungi untuk SSR, versi skema, jangan simpan rahasia dengan tidak aman, jangan pertahankan keadaan server yang dapat difetch ulang) adalah apa yang membuat pertahanan kuat daripada sumber bug yang sulit didiagnosis.