## Analogi Sederhana Bayangin kamu punya warehouse buat nyimpen barang. **Redux** kayak warehouse besar dengan security ketat - kamu harus isi form (action), tunggu approval (reducer), baru bisa ambil/taruh barang. **Context API** kayak kotak di rumah - gampang access, tapi setiap orang yang mau liat isi kotak harus dateng ke rumah (re-render). **Zustand** kayak locker pribadi dengan kunci pintar - kamu bisa ambil/taruh barang langsung, cuma orang yang butuh barang spesifik aja yang dikasih tau ada update, yang lain ga perlu tau. ## Kenapa Zustand Dibuat? Masalah dengan state management di React: **Masalah 1: Redux Boilerplate** ```javascript // Redux - banyak banget boilerplate! // 1. Action types const INCREMENT = 'INCREMENT' // 2. Action creators const increment = () => ({ type: INCREMENT }) // 3. Reducer const reducer = (state = { count: 0 }, action) => { switch (action.type) { case INCREMENT: return { count: state.count + 1 } default: return state } } // 4. Store setup, Provider, dll... ``` **Masalah 2: Context Re-render Issues** ```javascript // Context - semua consumer re-render const AppContext = createContext() function Parent() { const [state, setState] = useState({ count: 0, user: {} }) return ( {/* Re-render walau cuma user yang berubah */} {/* Re-render walau cuma count yang berubah */} ) } ``` **Masalah 3: Prop Drilling** ```javascript // Oper state lewat banyak level ``` **Solusi: Zustand** ```typescript // Satu store, tanpa boilerplate import { create } from 'zustand' const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) })) // Pakai di mana aja, tanpa Provider! function Component() { const count = useStore((state) => state.count) return

{count}

} ``` ## Zustand vs Alternatives ### Zustand vs Redux | Aspek | Zustand | Redux | |-------|---------|-------| | Boilerplate | Minimal | Banyak | | Bundle Size | 1KB | 3KB+ | | Learning Curve | Gampang | Curam | | DevTools | Ada | Ada | | Middleware | Simple | Kompleks | | Butuh Provider | Engga | Iya | ### Zustand vs Context API | Aspek | Zustand | Context | |-------|---------|---------| | Setup | Gampang | Gampang | | Performa | Excellent | Masalah re-render | | Selectors | Built-in | Manual | | Boilerplate | Minimal | Medium | | Multiple Stores | Gampang | Perlu banyak Providers | **Kapan Pakai Zustand?** - React apps kecil-menengah - Pengen state management yang simple - Performa penting (minimize re-renders) - Team baru dengan React (learning curve gampang) - Ga butuh ecosystem/middleware Redux **Kapan TIDAK Pakai Zustand?** - Udah pake Redux & nyaman - Butuh Redux DevTools time-travel (Zustand support tapi terbatas) - State logic super kompleks (middleware Redux lebih bagus) - Butuh strict patterns & conventions (Redux lebih cocok) ## Setup Guide (2 Menit) ### Step 1: Install ```bash npm install zustand ``` ### Step 2: Create Store ```typescript // stores/counterStore.ts import { create } from 'zustand' interface CounterState { count: number increment: () => void decrement: () => void reset: () => void } export const useCounterStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), reset: () => set({ count: 0 }) })) ``` ### Step 3: Use in Components ```typescript 'use client' import { useCounterStore } from '@/stores/counterStore' export default function Counter() { // Pilih cuma yang kamu butuh const count = useCounterStore((state) => state.count) const increment = useCounterStore((state) => state.increment) const decrement = useCounterStore((state) => state.decrement) return (

Count: {count}

) } ``` Selesai! Tanpa Provider, tanpa boilerplate. ## Contoh Real-World: Shopping Cart Skenario: Bikin shopping cart dengan add/remove items, hitung total, simpan ke localStorage. ### 1. Define Cart Store ```typescript // stores/cartStore.ts import { create } from 'zustand' import { persist } from 'zustand/middleware' interface CartItem { id: string name: string price: number quantity: number image: string } interface CartState { items: CartItem[] addItem: (item: Omit) => void removeItem: (id: string) => void updateQuantity: (id: string, quantity: number) => void clearCart: () => void total: number itemCount: number } export const useCartStore = create()( persist( (set, get) => ({ items: [], addItem: (item) => set((state) => { const existing = state.items.find((i) => i.id === item.id) if (existing) { return { items: state.items.map((i) => i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i ) } } return { items: [...state.items, { ...item, quantity: 1 }] } }), removeItem: (id) => set((state) => ({ items: state.items.filter((item) => item.id !== id) })), updateQuantity: (id, quantity) => set((state) => { if (quantity <= 0) { return { items: state.items.filter((item) => item.id !== id) } } return { items: state.items.map((item) => item.id === id ? { ...item, quantity } : item ) } }), clearCart: () => set({ items: [] }), // Nilai computed get total() { return get().items.reduce( (sum, item) => sum + item.price * item.quantity, 0 ) }, get itemCount() { return get().items.reduce((sum, item) => sum + item.quantity, 0) } }), { name: 'shopping-cart' // key localStorage } ) ) ``` ### 2. Product Card Component ```typescript // components/ProductCard.tsx 'use client' import { useCartStore } from '@/stores/cartStore' interface Product { id: string name: string price: number image: string } export default function ProductCard({ product }: { product: Product }) { const addItem = useCartStore((state) => state.addItem) return (

{product.name}

${product.price}

) } ``` ### 3. Cart Component ```typescript // components/Cart.tsx 'use client' import { useCartStore } from '@/stores/cartStore' export default function Cart() { const items = useCartStore((state) => state.items) const total = useCartStore((state) => state.total) const updateQuantity = useCartStore((state) => state.updateQuantity) const removeItem = useCartStore((state) => state.removeItem) const clearCart = useCartStore((state) => state.clearCart) if (items.length === 0) { return

Your cart is empty

} return (

Shopping Cart

{items.map((item) => (

{item.name}

${item.price}

{item.quantity}

))}

Total: ${total.toFixed(2)}

) } ``` ### 4. Cart Badge (Header) ```typescript // components/CartBadge.tsx 'use client' import { useCartStore } from '@/stores/cartStore' export default function CartBadge() { // Cuma re-render kalau itemCount berubah! const itemCount = useCartStore((state) => state.itemCount) return (

{itemCount > 0 && ( {itemCount} )}

) } ``` **Yang Kamu Dapat:** - Tanpa Provider - Otomatis disimpan ke localStorage - Nilai computed (total, itemCount) - Re-render selektif (CartBadge cuma re-render kalau count berubah) - Type-safe dengan TypeScript - API simple, gampang dipahami ## Key Features ### Async Actions ```typescript interface UserState { user: User | null loading: boolean fetchUser: (id: string) => Promise } const useUserStore = create((set) => ({ user: null, loading: false, fetchUser: async (id) => { set({ loading: true }) try { const response = await fetch(`/api/users/${id}`) const user = await response.json() set({ user, loading: false }) } catch (error) { set({ loading: false }) } } })) ``` ### Middleware: Persist ```typescript import { persist } from 'zustand/middleware' const useStore = create( persist( (set) => ({ theme: 'light', toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })) }), { name: 'app-settings' // localStorage key } ) ) ``` ### Middleware: Immer (Update Lebih Gampang) ```typescript import { immer } from 'zustand/middleware/immer' const useStore = create( immer((set) => ({ nested: { user: { profile: { name: 'Galih' } } }, updateName: (name: string) => set((state) => { // Mutasi langsung dengan Immer state.nested.user.profile.name = name }) })) ) ``` ### DevTools ```typescript import { devtools } from 'zustand/middleware' const useStore = create( devtools((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })) })) ) ``` ## Kesimpulan Zustand membuktikan bahwa state management ga harus ribet. Dengan API yang minimal, performa excellent, dan DX yang smooth. Keuntungan: 1. **Minimal Boilerplate** → Define store, pakai hook, selesai 2. **Tanpa Provider** → Bisa dipake di mana aja di component tree 3. **Re-render Selektif** → Cuma components yang subscribe ke state tertentu yang re-render 4. **Bundle Kecil** → 1KB, cocok banget buat yang peduli bundle size 5. **DX Bagus** → API simple, TypeScript support, DevTools ### Checklist: Mulai Pakai Zustand **Setup:** - [ ] Install Zustand (`npm install zustand`) - [ ] Bikin store pertama dengan `create()` - [ ] Define state dan actions - [ ] Export hook dari store - [ ] Pakai di components (tanpa Provider!) **Optimasi:** - [ ] Pakai selectors buat minimize re-renders - [ ] Subscribe cuma ke state yang component butuh - [ ] Pakai computed values untuk derived state - [ ] Pecah store besar jadi store-store kecil yang fokus **Persistence:** - [ ] Tambahin persist middleware buat localStorage - [ ] Konfigurasi storage key - [ ] Test hydration di SSR apps - [ ] Clear storage kalau perlu (logout, dll) **Advanced:** - [ ] Pakai Immer middleware buat nested updates yang lebih gampang - [ ] Tambahin DevTools middleware buat debugging - [ ] Implement async actions dengan loading states - [ ] Bikin store slices buat organisasi lebih baik - [ ] Test stores secara terpisah **Best Practices:** - [ ] Jaga stores tetap fokus (satu domain per store) - [ ] Pakai TypeScript buat type safety - [ ] Hindari deeply nested state - [ ] Pakai selectors secara konsisten - [ ] Jangan simpen derived state di store (hitung on-the-fly) **Kapan Zustand Perfect:** - React apps kecil-menengah - Pengen minimal boilerplate - Performa penting - Butuh learning curve yang gampang - Ga butuh ecosystem Redux **Pertimbangkan Alternatif Kalau:** - App besar dengan state logic kompleks (Redux) - Butuh time-travel debugging (Redux DevTools lebih bagus) - Team butuh strict patterns (Redux) - State simple dan lokal (useState/Context) Langkah Selanjutnya: 1. Explore [Zustand docs](https://docs.pmnd.rs/zustand) untuk advanced patterns 2. Coba kombinasi multiple middlewares 3. Liat Zustand recipes untuk common patterns 4. Join Poimandres Discord community **Key Insight:** Kekuatan super Zustand adalah simplicity tanpa korbanin features. Kamu dapet state management yang powerful tapi dengan API yang minimal. Balance sempurna antara simplicity dan flexibility. Begitu kamu nyoba API simple Zustand dan rasain minimal re-renders, susah balik ke boilerplate Redux atau performance issues Context!

Zustand: State Management Minimalis yang Powerful