React Context lwn Zustand: Bila hendak gunakan yang mana satu
Pembangun sering melakukan satu kesilapan dengan state React. Mereka menggunakan Context secara tidak betul dan kemudian menyalahkan Context atas masalah prestasi.
Masalahnya biasanya adalah satu objek context yang besar. Apabila satu nilai dalam objek tersebut berubah, setiap komponen yang menggunakan context tersebut akan melakukan re-render. Walaupun sesebuah komponen hanya memerlukan satu bahagian kecil data, ia tetap bertindak balas terhadap setiap perubahan dalam objek tersebut.
Jika notifikasi anda dikemas kini setiap 30 saat, Navbar anda akan melakukan re-render walaupun Navbar tersebut hanya memerlukan nama pengguna. Ini menjejaskan prestasi.
Anda boleh membaiki perkara ini tanpa menggunakan library. Pecahkan context anda berdasarkan kekerapan ia berubah.
Daripada menggunakan satu context yang besar, gunakan beberapa context: • UserContext untuk data pengguna • UIContext untuk state sidebar • NotificationContext untuk amaran
Kini, Navbar anda hanya akan melakukan re-render apabila data pengguna berubah. Pembahagian ringkas ini menyelesaikan kebanyakan masalah prestasi.
Gunakan React Context untuk nilai yang stabil: • Tema • Status auth • Tetapan bahasa
Context juga berfungsi dengan baik dengan Server Components. Zustand hanya berfungsi di bahagian client.
Gunakan Zustand apabila anda memerlukan langganan terpilih (selective subscriptions). Zustand membolehkan komponen melanggan bahagian (slices) state yang khusus. Jika satu bahagian dalam store anda berubah, hanya komponen yang memerhatikan bahagian khusus tersebut akan melakukan re-render.
Ikuti logik ini untuk state baharu:
Gunakan React Context jika: • Data adalah stabil (tema, auth, locale). • Anda memerlukannya berfungsi dengan SSR atau Server Components. • Anda ingin mengelakkan prop drilling dengan memecahkan context.
Gunakan Zustand jika: • Data kerap berubah. • Komponen perlu memerhatikan bahagian (slices) state yang khusus. • Logik anda adalah kompleks.
Tunggu. Jangan gunakan kedua-duanya untuk data API. Jika anda mengambil data daripada pelayan, gunakan TanStack Query. Context dan Zustand tidak mengendalikan caching atau pengambilan semula data di latar belakang (background refetching).
Ringkasan: • Satu objek context yang besar menyebabkan re-render. Pecahkannya. • Menggunakan Zustand untuk nilai yang stabil adalah berlebihan (overkill). • Menggunakan Context untuk perubahan yang kerap menyebabkan kelengahan (lag). • Menggunakan Zustand untuk server state adalah alat yang salah.