Recoil, Pustaka State Management Untuk React

Tantangan terbesar dalam pengembangan aplikasi React adalah pengelolaan state global. Dalam aplikasi yang besar, Menggunakan React saja tidak cukup untuk menangani kompleksitas state global, itulah sebabnya beberapa pengembang banyak sekali menggunakan React Hooks Redux, dan pustaka manajemen state lainnya.

Apakah Anda Membutuhkan Pustaka State Management?

Untuk alasan kompatibilitas dan kesederhanaan, sebaiknya kita menggunakan kemampuan manajemen state bawaan React daripada pustaka state global eksternal seperti Recoil. Tetapi seperti yang saya katakan sebelumnya, React memiliki batasan tertentu dalam hal manajemen state global.

Jadi Kapan Kita Harus Menggunakan Pustaka State Management Seperti Recoil?

Menerapkan manajemen state global tidaklah begitu mudah, membutuhkan waktu untuk menerapkannya. Jadi, sangat penting bagi Anda untuk mengetahui kapan harus menerapkan manajemen state global.

1. Jika aplikasi Anda berisi banyak komponen dan banyak permintaan dikirim ke back-end untuk pengambilan data, maka menjadi wajib untuk menerapkan manajemen state global, karena hal ini akan meningkatkan pengalaman pengguna dan kecepatan aplikasi anda.
2. Jika Anda menggunakan data yang redundant di seluruh aplikasi, misalnya, data daftar pelanggan juga digunakan dalam pembuatan faktur dan pembuatan laporan penjualan, maka tidak perlu mengambil data pelanggan lagi dan lagi dari database. Anda cukup meletakkan data dalam manajemen state global.

Mengapa Recoil.js Sangat Menarik?

Recoil terasa seperti React. Sintaksnya mirip dengan React dan terlihat seperti bagian dari React API. Selain itu, ia memiliki banyak kelebihan lain seperti memecahkan masalah manajemen state global, state bersama (shared state), data turunan, dll.

Konsep Recoil.

Recoil adalah pustaka manajemen state global eksperimental dari Facebook, yang dibuat oleh Dave McCabe. Alasan mengapa saya lebih menyukai Recoil daripada Redux adalah karena Recoil menyelesaikan semua masalah manajemen state global yang kompleks tetapi konfigurasinya sangat sederhana, tidak seperti Redux. Dan kita tidak perlu menulis banyak kode boilerplate seperti yang kita lakukan dengan menggunakan pustaka manajemen state lain seperti Redux.

Memasang Recoil

Karena Recoil adalah pustaka manajemen state untuk React, Anda perlu memastikan bahwa Anda telah menginstal dan menjalankan React atau React Native sebelum memulai.

npm install recoil
// or
yarn add recoil

Konsep Inti Recoil

Ada dua konsep inti Recoil yang perlu Anda pahami. Yaitu Atom dan Selector.

Atom

Atom adalah satuan state. Atom dapat diperbarui dan juga di subscribe: ketika sebuah atom diperbarui, setiap komponen yang berlangganan akan dirender ulang dengan nilai baru. Atom juga dapat dibuat saat runtime. Atom dapat digunakan sebagai pengganti state komponen lokal React. Jika atom yang sama digunakan dari beberapa komponen, semua komponen tersebut memiliki state yang sama.

Anda dapat membuat Atom dengan fungsi atom:

const countState = atom({
  key: 'countState',
  default: 1,
});

Atom menggunakan key unik untuk debugging, persistence, dan pemetaan semua atom. Anda tidak dapat memiliki key duplikat di antara atom. Jadi karena itu Anda perlu memastikan mereka unik secara global. Dan juga seperti state komponen React, mereka juga memiliki nilai default.

Untuk membaca dan menulis atom dari sebuah komponen, kita menggunakan sebuah hooks yang disebut useRecoilState. Ini mirip seperti useState di React, tetapi sekarang state dapat digunakan antar komponen:

function CountButton() {
  const [countValue, setCountValue] = useRecoilState(countState);
  return (
    <>
      <h4>Count Value {countValue}</h4>
      <button onClick={() => setCountValue((value) => value + 1)}>
        Click to Increase Count
      </button>
    </>
  );
}

Selectors

Selektor pada dasarnya adalah bagian dari derived state, di mana 'derived state' dapat didefinisikan sebagai 'keluaran dari state yang terlebih dahulu melewati fungsi murni yang memodifikasi keadaan yang diberikan dalam beberapa cara'. Jadi singkatnya ketika atom atau selektor ini diperbarui, fungsi selektor akan dievaluasi kembali. Komponen dapat berlangganan ke selektor seperti atom, dan kemudian akan dirender ulang ketika selektor berubah.

const countLabelOddEventState = selector({
  key: 'countLabelOddEventState',
  get: ({get}) => {
    const count = get(countState);
    if (count % 2 == 0) {
      return `isEven`;
    }
    return `isOdd`;
  },
});

Seperti yang Anda lihat, selektor juga memiliki ID unik seperti atom tetapi tidak memiliki nilai default. Selektor mengambil atom atau selektor lain sebagai input dan ketika input ini diperbarui, fungsi selektor akan dievaluasi kembali.

Selektor dapat dibaca menggunakan useRecoilValue(), yang menggunakan atom atau selektor sebagai argumen dan mengembalikan nilai yang sesuai. Anda tidak dapat menggunakan useRecoilState() karena countLabelOddEventState selector tidak dapat diubah (lihat referensi API selector untuk informasi lebih lanjut tentang selector yang dapat di ubah).

Kesimpulan

Secara pribadi saya pikir Recoil adalah pustaka yang bagus tetapi kecuali Anda memiliki beberapa masalah khusus mengenai manajemen state global, Anda tidak benar-benar membutuhkannya. Anda juga dapat menggunakan Recoil di sebagian kecil aplikasi Anda, tepat di tempat yang Anda butuhkan saja tanpa harus mengadopsinya untuk seluruh aplikasi.

Referensi

Recoil Core Concepts.

Recoil.js — A New State Management Library for React.