State management adalah salah satu konsep yang paling penting dalam dunia React. Ketika component React melakukan rendering dan update, mereka mengandalkan state untuk mengelola dan merefleksikan perubahan pada data dan elemen UI. Meskipun Redux telah mendominasi lanskap state management selama bertahun-tahun, para pengembang sekarang mencari solusi yang lebih mudah dan ringan seperti Zustand.
Kenapa harus belajar Zustand?
Salah satu fitur Zustand yang menonjol adalah API-nya yang minimalis, yang dirancang untuk menyederhanakan state management pada component React. Membuat Zustand sangatlah mudah, yaitu hanya dengan memanggil satu fungsi, meneruskan sebuah fungsi yang mendefinisikan state awal dan aksi dari penyimpanan. Berkat library Immer yang mendasarinya, state dapat dimodifikasi secara langsung, sehingga tidak memerlukan fungsi pereduksi yang rumit.
Apakah Zustand Lebih Baik daripada Redux?
Zustand mengurangi kode boilerplate dan menawarkan pengaturan yang lebih sederhana dibandingkan Redux. Jika Anda lebih suka solusi state management yang sederhana dan ringkas, Zustand mungkin lebih cocok.
Redux, di sisi lain, memiliki pengaturan yang lebih kompleks karena adanya action creator, reducer, dan middleware (sekarang jauh lebih mudah dengan Redux Toolkit). Meskipun Redux memiliki ukuran paket yang lebih besar, Redux menyediakan cara yang dapat diprediksi dan terstruktur untuk memanajemen state. Selain itu, Redux juga memiliki komunitas yang besar, sehingga menemukan solusi jauh lebih mudah ketika Anda menghadapi masalah. Saya percaya bahwa menggunakan Redux masih bermanfaat untuk aplikasi berskala besar.
Bagaimana cara menggunakan Zustand?
Mari kita lihat bagaimana cara memanage status menggunakan Zustand. Pertama, instal library.
npm install zustand
Buat sebuah file bernama store.js, dan buatlah hook store Anda.
const useCounterStore = create((set) => ({
}))
Dalam function ini, Anda harus menambahkan initial state dan action functions. Fungsi set akan menggabungkan state.
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state)
=> ({ count: state.count + 1 })),
decrement: () => set((state)
=> ({ count: state.count - 1 })),
reset: () => set({ count: 0 })
}));
Kemudian Anda dapat menggunakannya di komponen sisi klien mana pun. Dan yang terbaik adalah Anda bahkan tidak perlu membungkus seluruh aplikasi Anda dengan provider state!
Kekurangan menggunakan Zustand
Zustand relatif lebih baru dibandingkan dengan library state management lainnya seperti Redux. Akibatnya, ekosistemnya, termasuk middleware, plugin, dan integrasi, mungkin belum begitu luas atau matang. Anda mungkin perlu mengembangkan solusi khusus untuk kasus penggunaan tertentu yang sudah tersedia paketnya di library lain.
Catatan: Saya juga mengalami masalah saat mempertahankan store saya di Next.js. Untuk mencegah masalah tersebut, saya harus menggunakan fungsi rehydrate dalam useEffect untuk setiap komponen yang saya gunakan pada store hook.
Overall, Zustand telah membuat saya terpesona dengan kesederhanaan dan kemudahan penggunaannya. Membuat aplikasi berukuran kecil hingga menengah dengan Zustand sangat mudah dan patut dicoba.
Namun, untuk proyek yang lebih kompleks dan ekstensif, saya masih akan mengandalkan Redux Saga. Ekosistem Redux Saga yang kuat, pola yang mapan, dan dukungan middleware yang komprehensif membuatnya sangat cocok untuk menangani kebutuhan state management yang kompleks, side effect, dan asynchronous actions.
