Skip to main content

Recoil, Pustaka State Management Untuk React

ยท Waktu baca 4 menit
Agastya Darma Laksana
Software Engineer

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// oryarn 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.

References#

Recoil Core Concepts.

Recoil.js โ€” A New State Management Library for React.

Code-Splitting React Native Dengan Repack

ยท Waktu baca 4 menit
Agastya Darma Laksana
Software Engineer

Ketika anda mengembangkan aplikasi React Native kemungkinan besar anda akan menulis banyak kode JavaScript yang di dalamnya memiliki dependensi yang biasanya berasal dari repositori external seperti NPM. Kompilasi dari banyak file JavaScript dan dependensi tadi akan di proses menjadi satu file bundle yang dapat di baca oleh React Native. Di React Native kompilasi ini akan dilakukan secara default oleh Metro Bundler.

Jadi pada intinya Metro Bundler bekerja dengan cara mengambil kode sumber Anda, semua dependensi pustaka eksternal dan juga aset statis yang Anda gunakan lalu mengubahnya, mengoptimalkannya, dan mengemasnya menjadi satu bundel yang dapat dijalankan oleh React Native.

Apa Itu Code-Splitting?#

Code-Splitting adalah teknik yang memungkinkan developer untuk membuat beberapa file bundle dari sumber kode yang ada, jadi bundle yang di hasilkan bukan hanya satu melainkan terdiri dari banyak file yang biasa di sebut sebagai chunck.

Secara default, semua file input Anda (kode sumber, dependensi, dan aset) digabungkan menjadi satu file. Dengan Code-Splitting, bundle tadi akan dibagi menjadi beberapa bagian yang di sebut dengan chunck. Sedangkan chunck utama (juga dikenal sebagai entry chunk) biasa disebut sebagai main bundle.

Mengapa Anda Membutuhkan Re.pack Untuk Melakukan Code-Splitting?#

Seperti yang sudah di jelaskan di atas secara default React Native akan menggunakan Metro Bundler untuk melakukan bundling JavaScript. Namun sayangnya Metro Bundler tidak dapat melakukan teknik Code-Splitting secara default. Untuk dapat melakukan teknik Code-Splitting maka kita memerlukan bundler JavaScript selain dari Metro Bundler.

Apa Itu Re.pack?#

Re.pack pada dasarnya adalah sebuah toolkit yang memungkinkan Anda untuk menggunakan Webpack dan fungsionalitas Code-Splitting nya untuk di aplikasikan pada React Native.

Mengapa Kita Membutuhkan Code-Splitting di React Native?#

Bundel tunggal bukanlah hal yang buruk, namun seiring berkembangnya aplikasi Anda, ukuran bundel Anda akan membesar juga. Terutama jika Anda menggunakan banyak library dari pihak ketiga Anda perlu untuk sangat memperhatikan kode yang akan dimasukkan ke dalam bundel aplikasi sehingga Anda tidak secara tidak sengaja menjadikan bundle anda berukuran sangat besar sehingga butuh waktu yang lama untuk React Native memuat aplikasi Anda.

Meningkatkan Waktu Startup Aplikasi.#

Jika anda memiliki masalah kinerja di area startup aplikasi Code-Splitting adalah teknik yang sangat layak dicoba ketika anda memiliki masalah tersebut.

Memindahkan kode dari bundel tunggal ke banyak potongan chunck jika di konfigurasi dengan benar dapat membuat aplikasi React Native Anda hanya akan memuat potongan kode yang diperlukan dan menunda pemuatan kode lainnya. Hal ini sangat membantu meningkatkan kinerja startup aplikasi anda.

Aplikasi Modular#

Aplikasi yang mengekspos fungsionalitas yang berbeda atau UI yang berbeda berdasarkan detail pengguna adalah contoh aplikasi yang akan sangat diuntungkan dari Code-Splitting.

Mari kita ambil contoh aplikasi e-learning seperti Ruangguru. Dengan Code-Splitting, anda akan dapat memisahkan fungsi siswa dan guru di file bundle yang terpisah, sehingga aplikasi hanya memuat salah satu bundle saja, hal ini dapat meningkatkan kinerja startup dengan memuat hanya kode yang relevan dengan kebutuhan user.

Dua kelompok aplikasi lain di mana Code-Splitting memainkan peran besar adalah pada aplikasi super (seperti Gojek) dan juga aplikasi dengan toko aplikasi mini (seperti WeChat / Line). Alih-alih memiliki beberapa aplikasi di App Store dan Google Play, Anda dapat menggabungkannya menjadi satu sambil merampingkan pengembangan dan menyederhanakan pengelolaan.

Cara Menggunakan Re.pack Untuk Code-Splitting Di React Native#

Bagaimana caranya menggunakan Re.pack? Langkah pertama untuk menggunakan Re.pack adalah dengan cara menginstall dependensi yang diperlukan:

npm i -D webpack terser-webpack-plugin babel-loader @callstack/repack# oryarn add -D webpack terser-webpack-plugin babel-loader @callstack/repack

Setelah itu, Buat react-native.config.js (jika file ini tidak ada di project anda) dan salin konten di bawah ini:

module.exports = {  commands: require('@callstack/repack/commands'),};

Lalu konfigurasikan XCode dan Gradle untuk menggunakan perintah webpack-bundle. Dengan melakukan perubahan ini maka anda akan menggantikan Metro Bundler default menjadi Re.pack

  • XCode: Tambahkan export BUNDLE_COMMAND=webpack-bundle ke phase Bundle React Native code and images dari Build Phases dalam konfigurasi proyek XCode anda.

    export NODE_BINARY=nodeexport BUNDLE_COMMAND=webpack-bundle../node_modules/react-native/scripts/react-native-xcode.sh
  • Gradle: Tambahkan bundleCommand: "webpack-bundle" ke dalam project.ext.react di file android/app/build.gradle,sehingga terlihat mirip dengan:

    project.ext.react = [    enableHermes: false,  // clean and rebuild if changing    bundleCommand: "webpack-bundle",    bundleInDebug: false]

Semua konfigurasi telah selesai. Sekarang anda Anda dapat menggunakan repack dalam aplikasi React Native anda.

Untuk menjalankan server pengembangan anda dapat menggunakan perintah

npx react-native webpack-start

Apa saja kekurangan Repack dibandingkan dengan Facebook Metro Bundler ?#

Tentu saja ada beberapa kekurangan ketika kita menggunakan Code-Splitting dengan Re.pack di banding dengan Metro Bundler. Salah satu kekurangan paling besar adalah kita tidak dapat lagi menggunakan Codepush untuk melakukan Hot Push code di Production Env.

Selain intu pada waktu artikel ini di tulis jika anda menggunakan Hermes dengan Re.pack Maka dia hanya dapat mengubah Main Bundle menjadi Hermes Bytecode, file chunck di luar Main Bundle tidak akan di transformasi menjadi Hermes Bytecode.