Memilih Management State yang Tepat
Pertumbuhan cepat suatu library dalam mendukung teknologi pemograman pastinya akan membingunkan kita sebagai developer karena didalam komunitas sendiri pasti memiliki argument berbeda. Hal ini sangat wajar dan memang harus demikian karena kita developer mempunyai tangung jawab besar dalam mengeksekusi bisnis model yang berbeda-beda disetiap perusahaan.

Permasalahan itulah yang menyebabkan diskusi kita menjadi lebih bermanfaat dan berkembang. Oleh karena itu, mengetahui library management state mana yang harus dipilih dalam proyek tertentu agar tidak menjadikan dilema yang berkepanjangan dan terlebur dalam diskusi yang bising baik menggunakan hooks, recoil dan redux.

Pada artikel ini, kita aka membahas management state mengunakan ketiganya redux, hooks dan recoil dalam aplikasi react. Pembahasan ini bermanfaat bagi teman-teman yang tertarik untuk mengembangkan aplikasi react yang membutuhkan management library.

Definisi sederhana management state itu suatu cara untuk menciptakan komunikasi dan sharing data di semua komponen. Hasil komunikasi ini menciptakan struktur data jelas untuk mewakili state aplikasi kita. Lalu state itu adalah objek Javascript yang mewakili bagian dari komponen yang dapat berubah berdasarkan state yang dihasilakan dari user. Dan perlu dicatat bahwa mulai react 16 .8 setiap komponen react baik fungsional dan class dapat memiliki state. State itu hanyalah memori dari suatu komponen.

Pada saat user melakukan action dalam aplikasi react, perubahan terjadi pada state komponent. Sebenarnya ini tidak bermasalah jikalau hanya aplikasi sederhana namun permasalahan timbul karena kompleksitas aplikasi itu membuat sangat sulit untuk melacak semua dependensi.

Sebagai contoh aplikasi ecommerce yang dimplementasikan hampir setiap element dapat menjadi komponent shopping cart, checkout dan login dll. Didalam aplikasi tersebut hanya ada satu action user untuk menambahkan ke shopping cart dapat mempengaruhi banyak komponent lainya dengan mengubah state dari komponent shopping cart, membuat history cart user dan checkout produk item. Jika developer tidak mempertimbangkan scalability saat pengembangan aplikasi, mereka mungkin akan segera mempusingkan diri sendiri dengan mengalami banyak bug dan masalah dalam jangka panjang. Bug berkelanjutan dan memperbaikinya secara berkala pada akhirnya akan merepotkan developer.

Permasalahan itulah nantinya akan menyadarkan kita pentingnya state dalam aplikasi react. Dalam mengelola state aplikasi, kita dapat menggunakan sebuah library pilihan kita dan tetap menyelesaikan perkerjaan itu. Biasanya state harus diletakkan ke induk komponent terdekat dan selanjutnya sampai ke root yang sama untuk kedua komponent yang membutuhkan state dan diturunkan. Proses ini sangat melelahkan dan membuat state sulit dipertahankan. Terkadang kita juga mungkin perlu mengirimkan data ke komponen yang bahkan tidak membutuhkan.

Management state akan berantakan saat aplikasi berkembang. Maka suatu management state diperlukan seperti hooks, recoil, redux yang membuat state mempertahankan state. Kita akan melihat library management state tesebut dan apa yang kita pertimbangkan sebelum menggunakan salah satu dari mereka.

Redux

Redux library yang populer saat penulisan artikel ini. Pada tutorial bab ini, kita mengatasi permasalahan menggunakan redux dalam library management state di aplikasi ecommerce. Redux menyediakan objek Javascript ‘store’ yang telah disiapkan mencakup semua state dalam aplikasi kita dan mengupdate jika diperluakan. Ilustrasinya seperti ini:

Gambar diatas menunjukkan bahwa sesungguhnya redux menangani pembaharuan / update state sebagai response terhadap action user/pengguna, terutama di UI. Selain itu redux dapat digunakan sebagai management state mandiri dari framework manapun.

Kapan redux digunakan ?

Kita akan menggunakan redux dalam sebuah aplikasi dan melihatnya lebih dekat waktu yang tepat menggunakanya.

Redux memastikan management state diaplikasi dalam satu tempat dan membuat update perubahan di aplikasi kita dapat diprediksi dan terhistory. Mengguntungkan developer membuat perubahan yang terjadi di aplikasi lebih mudah untuk diketahui. Kemudahan inilah yang menjadi kendala diawal dengan pengorbanan tertentu. Karena kita harus menggunakan boilerplate code dalam membuat hal-hal kecil itu kelihatan berlebihan. Namun itu hanya bergantung pada keputusan arsitetur system.

Ok...jangan kuatir itu hanya antisipasi jika nanti akan dipusingkan, salah satu cara termudahnya memastikan kapan menggunakan redux adalah ketika management state secara lokal mulai amburadul alias mosakmasik tidak beraturan.

Mengapa menggunakan redux ?
Mengapa menggunakanya karena redux dengan react menghilangkan kerumitan amburadul state, memudahkan kita melacak dari history action mana yang menyebabkan perubahan , sehingga menyederhanakan aplikasi dan membuatnya lebih mudah untuk dipelihara.

1. Komunitas

Redux populer saat ini karena didukung dengan komunitas yang besar untuk memudahkan kita lebih mudah untuk diskusi atau bantuan dan belajar tentang implementasi terbaik yang dibangun diatas library react-redux.

2. Optimasi performance

React redux memastikan kinerjanya bahwa komponen yang terconnect hanya merender kembali saat dibutuhkan. Ini menjaga global state tidak dapat menghasilkan masalah apa pun.

3. State mudah diprediksi

Jika state dan action yang sama berpindah ke reducer, maka akan diperoleh hasil yang sama karena redux adalah pure fucntion. State dapat juga immutable dan tidak dapat diupdate. Itu membuat memungkinkan untuk implementasikan tugas-tugas berat seperti undo dan redo yang tak terbatas. Itu juga memungkinkan dalam perjalanan waktu mampu untuk bergerak maju mudur diantara state sebelumnya dan melihat hasil secara Real-time.

4. State di local storage

Mempertahankan bebrapa state di local storage adalah hal yang sangat luar biasa dalam menerapkan shooping cart karena memungkinkan untuk dapat menyimpan dan mengupdate.

5. Server-side rendering

Redux dapat digunakan untuk server-side rendering. Dengan melakukan itu kita dapat menghandle render awal pada aplikasi dengan mengirimkan state ke server berserta response ke server request.

6. Maintenace redux

Redux sangat disiplin tentang bagaimana code harus di rancang diawal. Memahami struktur aplikasi redux memudahkan kita developer dapat memisahkan logic bisnis dari komponent pohon untuk lebih mudah maintenance. Terutama aplikasi kita dalam skala besar, sangat penting untuk membuat aplikasi tersebut lebih dapat diprediksi dan maintenance.

7. Bug mudah terdeteksi

Logging action dan state mudah dipahami jika terjadi code error, network error dan lainnya selama production. Ada juga Devtools yang baik kita melakukan time-travel action, action tetap dalam page-refresh.

Walaupun redux kelihatanya banyak manfaat itu belum menjamin bahwa kita harus menambahkan di semua aplikasi. Tanpa redux kita masih bisa berjalan.

Recoil

Recoil saat pembuatan artikel ini masih yang terbaru dikomunitas management state serperti pendahulunya redux, context, mobx dll. Sebenarnya recoil ini secara resmi tidak termasuk management state libary untuk react. Namun memperlihatkan bahwa itu dibuat dan dirilis oleh dari tim facebook oleh yang menciptakan react. Redux juga sama bukan secara resmi library react. Tetapi komunitas react secara kompak membuktikan jika mereka membutuhkanya secara umum.

Recoil bisa memecahkan apa ?

Setelah sedikit mencoba menggunakan recoil dalam memecahkan kebanyakan library management state global. Mirip dengan management state library lainya recoil menangani observasi state diseluruh aplikasi dengan baik. Dan manfaat lain

— Distribusi dan penambahan state definition.

— free API boilerplate.

Dengan recoil terasa seperti menggunakan versi global useState React. Ini juga mendukung mode bersamaan. Recoil mempunyai 2 konsep yaitu Atoms dan Selectors. Kedua konsep ini akan dibahas di bab berikutnya.

Kapan memilih Recoil ?

Tidak ada salahnya kita mencoba beberapa konsep management state dalam berbagai proyek. Akan baiknya melihat dulu arsitektur aplikasi yang dibangun tergantung keputusan sang arsitek teknologi. Jika kita sama suka dengan kesederhanaan maka recoil bisa diterapkan di aplikasi dengan power yang sama.

React Hooks

Salah satu fitur yang luar biasa di library react sejak dibuat adalah Hooks. Hooks membawa ‘state’ ke komponen fungsional, ingat fungsional. Sekarang komponen fungsional dapat membuat dan mengelola state lokal sendiri seperti komponent class. Developer yang sudah mengunakan react pasti sudah terbiasa dengan useState, useEffect dan useReducer dll. Karena react hooks dapat berdiri sendiri tanpa dari library management state eksternal manapun.
Menggunakan React Hooks sebagai management state utama tidak harus mengandalkan pihak luar manapun, hampir semua yang dilakukan pihak ketiga seperti redux dan recoil mampu dilakukan sendiri.

Keterbatasan suatu library pasti ada dalam kasus redux, beberapa kode boilerplate diperlukan untuk membuatnya berkerja diaplikasi kita karena ia memperlihatkan kerumitan kompleks yang tidak perlu. Disisi lain, dengan useContex API dan React Hooks, tidak perlu mengistall library agar aplikasi kita berfungsi. React hooks mebuat caranya lebih sederhana dan lebih mudah untuk menghandle management satus global dalam aplikasi react. Dengan asumsi teman-teman sudah terbisasa dengan useState.

Adapun 2 hooks yang membantu proses management didalam react.

useReducer Hooks

Hook ini hadir dalam versi 16.8. sama seperti method reduce() dalam Javascript, useReducer Hook menerima dua nilai sebagai argument (reducer function dan initial state) dan mengembalikan state baru.

  const [state, dispatch] = useReducer((state, action) =>{
  const {type} = action;
  switch(action){
      case 'action description':
      const newState = // do something with the action
      return newState;
      default:
    throw new Error()
    }
  }, []);

Kita bisa lihat state telah terdifinisikan dan method yang sesuai dispatch yang menghandle. Pada waktu kita memanggil method dispatch, useReducer() Hook akan melakukan action berdasarkan type yang diterima method didalam argument action.

  ...
  return (
    <button onClick={()=>
      dispatch({type:'action type'})}>
      </button>
      )

useContext

useContext ini digunakan untuk mendapatkan current context of a provider. Untuk membuat dan menggunakan sebuah context, dengan menggunakan React.createContex API.

const myContext = Rect.createContext();

Kita dapat meletakkan komponent root diantara myContext provider. Kemudian kita konsumsi nilai provider melalui

<myContext.Provider> </myContext.Provider>

dengan menggunakan useContext hook.

Hook useReducer dan useContext

Bersama-sama menggunakan akan membawa mangement state komponen yang terletak sama ditingkat lain. Artinya kita dapat membawa state container yang dibuat oleh useReducer dan dispatch function ke komponen dimanapun dan tingkat atas manapun menjadi state ‘global’. Dan memungkinkan juga passing data hanya menggunakan porps React, tetapi React Context API membuat state dan dispatch function tersedia dimana saja tanpa explisit mempassing di tingkat bawah komponen pohon.