State Management Modern di React Native: Mengapa Zustand Menggantikan Redux

Masalah Boilerplate Berlebih pada Redux Klasik

Bagi banyak developer mobile, menulis Redux klasik sering kali menghabiskan waktu lebih banyak untuk membuat action, constant, dan reducer ketimbang menyelesaikan fitur aplikasi itu sendiri. Selain itu, jika selector tidak diatur dengan cermat, seluruh pohon komponen akan mengalami re-render yang tidak perlu.

Kesederhanaan Zustand

Zustand hadir dengan filosofi hooks murni tanpa perlu membungkus komponen root dengan <Provider>:

// store/useUserStore.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface UserState {
  token: string | null;
  setToken: (token: string) => void;
  logout: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
      logout: () => set({ token: null }),
    }),
    {
      name: 'user-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Komponen hanya mendengarkan nilai yang dibutuhkan, sehingga re-render terisolasi secara optimal tanpa overhead.