Best Practice Penyimpanan Data React Native

Penyimpanan data lokal adalah bagian penting dari aplikasi mobile. Banyak aplikasi perlu menyimpan token, preferensi pengguna, tema, sesi login, cart, dan data kecil lainnya. React Native awalnya menggunakan AsyncStorage, namun saat ini banyak developer beralih ke MMKV Storage karena kecepatannya yang luar biasa.

1. Apa Itu MMKV?

MMKV adalah storage milik WeChat (Tencent) yang digunakan oleh lebih dari 1 miliar pengguna. Keunggulannya:

• 50–100x lebih cepat dari AsyncStorage
• Mendukung enkripsi
• Persisten & stabil
• Mudah digunakan

2. Instalasi MMKV

npm install react-native-mmkv

3. Membuat Instance Storage

// storage/index.ts
import { MMKV } from "react-native-mmkv";

export const storage = new MMKV();

4. Menyimpan Data

storage.set("token", "abc12345");
storage.set("theme", "dark");

5. Mengambil Data

const token = storage.getString("token");
const theme = storage.getString("theme");

6. Menghapus Data

storage.delete("token");

7. Menyimpan Object (Serialize)

storage.set("user", JSON.stringify({ id: 1, name: "Jumanto" }));

const user = JSON.parse(storage.getString("user"));

8. Integrasi dengan Context API (State Persist)

Biasanya digunakan untuk menyimpan token login agar tetap login meski aplikasi ditutup.

// context/AuthContext.tsx
import { createContext, useState } from "react";
import { storage } from "../storage";

export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [token, setToken] = useState(storage.getString("token"));

  const login = (t) => {
    setToken(t);
    storage.set("token", t);
  };

  const logout = () => {
    setToken(null);
    storage.delete("token");
  };

  return (
    <AuthContext.Provider value={{ token, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

9. Best Practice Penyimpanan Data

• Simpan data kecil (token, theme, cart) gunakan MMKV.
• Gunakan JSON.stringify untuk menyimpan object.
• Jangan simpan password atau data sensitif tanpa enkripsi.
• Gunakan instance storage berbeda untuk kategori data berbeda.
• Gunakan hook custom untuk storage agar kode rapi.

10. Membuat Hook Penyimpanan (Custom Hook)

// hooks/useStorage.ts
import { useState } from "react";
import { storage } from "../storage";

export function useStorage(key) {
  const [value, setValue] = useState(storage.getString(key));

  const save = (val) => {
    storage.set(key, val);
    setValue(val);
  };

  return [value, save];
}

Dengan MMKV, aplikasi React Native Anda akan mendapatkan performa penyimpanan yang jauh lebih cepat, responsif, dan profesional.