React Context vs Zustand: Kapan harus menggunakan yang mana
Pengembang sering melakukan satu kesalahan dengan state React. Mereka menggunakan Context secara tidak tepat dan kemudian menyalahkan Context atas masalah performa.
Masalahnya biasanya terletak pada satu objek context yang besar. Ketika sebuah nilai dalam objek tersebut berubah, setiap komponen yang menggunakan context tersebut akan melakukan re-render. Meskipun sebuah komponen hanya membutuhkan satu potongan data kecil, ia tetap bereaksi terhadap setiap perubahan dalam objek tersebut.
Jika notifikasi Anda diperbarui setiap 30 detik, Navbar Anda akan melakukan re-render meskipun Navbar tersebut hanya peduli pada nama pengguna. Hal ini merusak performa.
Anda dapat memperbaiki hal ini tanpa pustaka. Pisahkan context Anda berdasarkan seberapa sering mereka berubah.
Alih-alih satu context besar, gunakan beberapa: • UserContext untuk data pengguna • UIContext untuk state sidebar • NotificationContext untuk peringatan
Sekarang, Navbar Anda hanya akan melakukan re-render saat data pengguna berubah. Pemisahan sederhana ini menyelesaikan sebagian besar keluhan performa.
Gunakan React Context untuk nilai yang stabil: • Tema (Themes) • Status autentikasi (Auth status) • Pengaturan bahasa (Language settings)
Context juga bekerja dengan baik dengan Server Components. Zustand hanya bekerja di sisi klien.
Gunakan Zustand saat Anda membutuhkan selective subscriptions. Zustand memungkinkan komponen untuk berlangganan ke slice state tertentu. Jika satu bagian dari store Anda berubah, hanya komponen yang memantau bagian spesifik tersebut yang akan melakukan re-render.
Ikuti logika ini untuk state baru:
Gunakan React Context jika: • Datanya stabil (tema, autentikasi, locale). • Anda membutuhkannya agar berfungsi dengan SSR atau Server Components. • Anda ingin menghentikan prop drilling dengan memisahkan context.
Gunakan Zustand jika: • Datanya sering berubah. • Komponen perlu memantau slice state tertentu. • Logika Anda kompleks.
Tunggu. Jangan gunakan keduanya untuk data API. Jika Anda mengambil data dari server, gunakan TanStack Query. Context dan Zustand tidak menangani caching atau background refetching.
Ringkasan: • Satu objek context yang besar menyebabkan re-render. Pisahkan. • Menggunakan Zustand untuk nilai yang stabil adalah berlebihan (overkill). • Menggunakan Context untuk perubahan yang sering menyebabkan lag. • Menggunakan Zustand untuk server state adalah alat yang salah.