Memilih State Manajemen untuk Proyek React

Perbandingan Redux, Context, SWR, React Query, dan RTK Query

Source: https://www.aleaitsolutions.com/wp-content/uploads/2018/05/reactjs_img-1.jpg

State Manajemen di React

State adalah data atau variabel yang biasanya reaktif, membuat perubahan pada user interface dengan melakukan render ulang. Mengatur state, memastikan render dilakukan dengan efisien adalah sebuah tantangan bagi seorang React Developer. Bagaimana arus pergerakan state dalam sebuah aplikasi? Mari kita lihat dua contoh kasus berikut.

Kasus pertama:
Dalam sebuah aplikasi media sosial seorang user menekan tombol logout, kemudian muncul pop-up konfirmasi. Hal yang sebenarnya terjadi adalah komponen tombol di trigger untuk mengirim data ke komponen induk untuk menampilkan pop-up dan backdrop hitam di luar pop-up. Kemudian ketika user menekan backdrop hitam, komponen backdrop harus mengirim data ke induk untuk menghilangkan pop-up. Ini kita sebut manajemen state intra klien atau antar komponen.

Kasus kedua:
Pada aplikasi yang sama, ketika user menekan tombol like pada sebuah posting maka komponen tombol like akan melakukan POST request ke server dengan membawa data bahwa user A menyukai post A. Setelah POST request berhasil maka data di server berupa jumlah user yang memberi like bertambah, dari satu menjadi dua misalnya. Padahal pada klien, data tersebut masih satu, maka klien harus melakukan fetch ulang untuk memperbaharui data miliknya. Ini kita sebut manajemen state antara server dan klien.

Hal seperti ini akan dilakukan berulang ulang pada sebuah aplikasi dengan berbagai macam situasi, kasus, dan kompleksitas. Oleh karena itu seringkali kita membutuhkan bantuan library. Mari kita bandingkan beberapa library yang populer untuk memudahkan kita mengelola state.

Redux

Mengutip redux.js.org, Redux disebut sebagai kontainer state yang mudah diprediksi (konsisten). Redux berperan sebagai kolam data yang bisa diakses komponen mana pun secara langsung, tidak perlu lagi passing data antara komponen anak & induk.

Redux secara default hanya berfungsi untuk sisi klien state manajemen, memindahkan semua state dari komponen ke redux store. Untuk melakukan fetching dari redux ke server perlu mengatur middlware atau menambahkan library lain.

Kelebihan:

1. Mudah di-maintain terutama ketika aplikasi makin membesar
2. Saat sebuah state di Redux berubah, kemungkinan terjadinya render ulang komponen lebih kecil
3. Memiliki fitur Redux DevTools yang sangat membantu proses debugging

Kekurangan:

1. Penggunaan memori yang besar, karena setiap terjadi perubahan state, reducer harus menghasilkan state baru
2. Proses setup yang lama dan boilerplate yang besar sehingga kurang cocok untuk proyek kecil

Context

Secara terminologi Context sebenarnya bukanlah library karena dia sudah terinstal secara default dalam React. Context adalah API atau fitur untuk mengoper state antar komponen tanpa harus manual mengoper dari komponen induk ke anak, sebagaimana Redux hanya saja lebih sederhana.

Kelebihan:

1. Praktis dan mudah digunakan
2. Tidak menambah ukuran bundel aplikasi

Kekurangan:

1. Proses debugging bisa menjadi rumit pada aplikasi skala besar
2. Tidak cocok untuk menyimpan state yang sering berubah
3. Tidak se-predictable & sekonsisten Redux

SWR

Jika dua library sebelumnya lebih fokus pada manajemen state client side, SWR menitikberatkan pada sinkronisasi antara klien dan server. SWR menyebut dirinya sebagai hook untuk melakukan fetching data. SWR adalah akronim dari Stale While Revalidate artinya menampilkan data usang dari cache terlebih dahulu sambil melakukan fetching di balik layar sehingga pengalaman user lebih nyaman, tidak perlu selalu menunggu loading.

Fitur lain yang dimiliki SWR adalah

1. Pagination
2. Validasi ulang saat cache kadaluwarsa
3. Fetching ulang saat terjadi fokus ulang tab
4. Fetching ulang setelah internet mati dan hidup kembali

React Query

React Query menyebut dirinya sebagai state manajemen asinkronus yang superior. React Query bisa dikatakan adalah superset dari SWR, yaitu memiliki fitur-fitur dari SWR ditambah dengan fitur lain seperti:

1. Explicit loading state
2. Devtools yang sangat membantu proses debugging
3. Garbage collection, yaitu penghapusan data di cache ketika sudah tidak aktif
4. Kemampuan untuk melakukan kustomisasi dan konfigurasi dengan kontrol penuh

RTK Query

Dua library yang sebelumnya lebih dominan dengan fitur state manajemen antara server dengan klien, lalu bagaimana jika kita tetap memerlukan state manajemen untuk sisi klien, tetapi juga ingin memiliki fitur-fitur seperti 2 library sebelumnya? Ternyata Redux memiliki add-ons bernama Redux Toolkit (RTK). Dengan RTK kita bisa menulis kode redux dengan lebih sederhana dan kita mendapat fitur tambahan untuk manajemen state server dengan klien seperti fetching, caching dan loading.

Kesimpulan

Pemilihan state manajemen sangat bergantung pada kebutuhan aplikasi, untuk proyek besar seringkali Redux lebih cocok, dan bila diperlukan bisa kita tambahkan RTK Query. Adapun selainnya bisa menggunakan Context. Kemudian library dengan fitur utama di server side sync lebih cocok untuk aplikasi yang mengizinkan update data ke server secara intens seperti media sosial, platform belajar, dll. Selain itu kita juga melihat kebutuhan kita yang lain, misalnya
1. Apakah ukuran bundle aplikasi sangat krusial pada bisnis kita?
2. Apakah tim kita sudah biasa menggunakan libraray tersebut? Jika belum 3. Apakah library tersebut mudah dipelajari,
4. dst.