Tujuan Pembelajaran

Bisa menggunakan Zustand untuk global state
Mengerti middleware (persist, devtools)
Mengerti kapan pakai Zustand vs Context

Analogi

Diagram


      State Scale:
Component State (useState) -> Component-wide
Context API -> App section
Zustand/Jotai -> App-wide, complex
Redux -> Enterprise, complex debugging

Zustand adalah solusi client state yang simple, powerful, dan tidak memerlukan Provider wrapper

Penjelasan Konsep

Untuk client state (theme, sidebar, modal, cart), kamu butuh state management yang simple dan tidak verbose.

Zustand adalah pilihan terbaik untuk kebanyakan proyek modern.

Kenapa Zustand?

No Provider (tidak perlu wrap app), No boilerplate (no actions, no reducers, no dispatch), TypeScript native (types inferred otomatis), Middleware (persist, devtools,

Immer dengan satu baris), Small (~1KB bundle size).

Selector untuk Performance

Hanya subscribe ke state yang dibutuhkan — mencegah re-render tidak perlu.

Kapan Context Cukup?

Kalau state jarang berubah dan tidak kompleks, Context API sudah cukup.

Context tidak butuh library tambahan dan sudah built-in di React.

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa menggunakan Zustand untuk global state., mengerti middleware (persist, devtools)., dan mengerti kapan pakai Zustand vs Context. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Zustand dan State Lokal, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Zustand adalah solusi client state yang simple, powerful, dan tidak memerlukan Provider wrapper. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. immer middleware memungkinkan mutasi draft tapi tetap immutable di bawah hood. persist menyimpan ke localStorage.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// Cart store dengan Zustand + Immer + Persist
import { create } from 'zustand';
import { persist, immer } from 'zustand/middleware';

interface CartItem {
  id: string; name: string; price: number; quantity: number;
}

export const useCart = create(persist(immer((set, get) => ({
  items: [],
  addItem: (item) => set((draft) => {
    const existing = draft.items.find(i => i.id === item.id);
    if (existing) existing.quantity++;
    else draft.items.push({ ...item, quantity: 1 });
  }),
  removeItem: (id) => set((draft) => {
    draft.items = draft.items.filter(i => i.id !== id);
  }),
  updateQuantity: (id, qty) => set((draft) => {
    const item = draft.items.find(i => i.id === id);
    if (item) item.quantity = qty;
  }),
  total: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
  itemCount: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
})), { name: 'cart-storage' }));

Penjelasan Kode

immer middleware memungkinkan mutasi draft tapi tetap immutable di bawah hood. persist menyimpan ke localStorage.

Prompt AI

Refactor satu fitur dari useState/useContext ke Zustand. Bandingkan jumlah code dan performa.

Pertanyaan Reflektif

State management bukan one-size-fits-all. Pilih tool yang sesuai skala — jangan over-engineer dengan Redux untuk todo list.