React Context API vs Redux: Mana State Management yang Terbaik?

Mengakhiri Mimpi Buruk 'Props Drilling'

Di React, data (State) mengalir dari Komponen Induk ke Komponen Anak melalui sebuah "Pipa" yang disebut Props. Bagaimana jika data StatusLogin yang ada di ujung atas ingin dipakai oleh komponen TombolCheckout yang berada 10 tingkat di bawahnya?

Kamu terpaksa mengoper *Props* tersebut melewati 9 komponen penengah yang sebenarnya tidak butuh data itu sama sekali. Praktik menyebalkan ini disebut Props Drilling. Untuk memotong kompas, kita membutuhkan Global State Management (sebuah 'Gudang Data Pusat' di awang-awang yang bisa diakses oleh komponen manapun tanpa perlu lewat *Props*).

1. React Context API (Bawaan React)

Context API adalah fitur resmi bawaan dari React sendiri. Kamu tidak perlu meng-*install package npm* tambahan.

• Kelebihan: Sangat mudah dipelajari. Kodenya ringkas. Sangat cocok untuk mengelola data yang jarang sekali berubah, seperti: Tema Terang/Gelap (Dark Mode), Bahasa Website (Localization), atau status Autentikasi User.
• Kelemahan Fatal: Context API TIDAK DIBUAT untuk data yang sering berubah terus-menerus. Jika kamu menyimpan angka Keranjang Belanja di Context, dan angka itu bertambah, seluruh komponen di website-mu yang memakai Context tersebut akan me-render ulang (Re-render) secara serentak, yang bisa membuat websitemu sangat *lag*!

2. Redux Toolkit / RTK (Standar Industri Raksasa)

Redux adalah *library* pihak ketiga yang sangat legendaris dan masih menjadi standar wajib di lowongan pekerjaan perusahaan korporat.

• Kelebihan: Performa luar biasa. Redux sangat pintar; jika komponen A mengambil data 'Nama', dan komponen B mengambil data 'Umur' dari Redux, maka saat data Umur berubah, HANYA komponen B yang di-render ulang. Komponen A tetap anteng. Redux juga punya fitur Time-Travel Debugging yang disukai *Senior Developer*.
• Kelemahan: Terlalu banyak *Boilerplate* (Kode Wajib). Untuk membuat satu *State* saja, kamu harus membuat Action, Reducer, dan Store yang kodenya sangat panjang dan membuat pemula pusing tujuh keliling.

Alternatif Modern: Zustand

Jika Context API terlalu lemah dan Redux terlalu rumit, tren dunia React di 2024 mulai bergeser ke arah *library* pihak ketiga yang ringan. Nama yang sedang naik daun adalah Zustand. Zustand memberikan performa re-render secepat Redux, namun dengan penulisan kode sesederhana Context API. Sangat disarankan untuk dicoba!