Illustration by Teddy Tri

State Manajemen untuk React Native

Pada kesempatan kali ini, saya akan membahas seputar state manajemen di react native. Garis besar pembahasan kali ini adalah apa itu state dan bagaimana cara kerjanya? Lalu bagaimana dengan props dan bagaimana cara kerjanya?

So guys let’s move on to the first part:

Apa itu State? dan Bagaimana Cara Kerjanya

Secara sederhana, state adalah tempat untuk meletakan data yang sifatnya dinamis yang mungkin bisa mempengaruhi tampilan aplikasi. Sebagai contoh, misalnya kita ingin menampilkan angka, kemudian disitu ada tombol yang apabila ditekan akan menambah angka itu, maka aplikasi perlu mereload lagi untuk menampilkan angka yang baru bukan? Nah disinilah peran state, dimana aplikasi bisa otomatis mereload ulang apabila terjadi perubahan data di state kita. Tapi jangan salah, aplikasi hanya akan mereload komponen yang mengandung nila state yang berubah saja, bukan di reload secara keseluruhan halaman.

Penulisan State

Penulisan state sendiri ada 2 cara, lewat constructor atau ditulis secara langsung di dalam kelasnya.

Supaya lebih paham, mari kita belajar sambil praktek sekalian ya. Pertama, bikin projek react native dengan perintah seperti di bawah (disini saya asumsikan kalian sudah install dependency yang ada ya guys, jadi saya tidak akan menjelaskannya disini):

npx react-native init Latihan

Nah setelah project terbuat, buka file App.js, kemudian hapus isinya. Sekarang kita coba tulis state kita pake cara 1, yaitu lewat constructor, tulis kode kalian seperti dibawah:

Kemudian dengan cara 2 yaitu lewat class langsung tanpa constructor, tulis kode kalian seperti dibawah:

Kode diatas akan menampilkan hasil yang sama. Sekarang kalian bisa pilih mau pakai cara yang pertama atau kedua, dalam hal performa, saya belum menemukan bedanya sih, tapi kalau untuk saya pribadi, saya lebih nyaman dengan cara 1 (lewat constructor), tapi jika teman-teman lebih suka dengan cara 2 its oke, terlebih cara 2 juga lebih singkat untuk ditulis. Pertanyaan selanjutnya adalah bagaimana cara kita untuk mengupdate data di state kita ? Di react native sendiri sudah disediakan fungsi khusus untuk itu menangani itu guys, yaitu dengan fungsi:

this.setState({ namaStateYangInginDirubah : nilaiStateBaru })

Supaya lebih paham, sekarang kita bikin skenario dimana akan ada sebuah tombol yang apabila tombol tersebut ditekan maka tampilan nama kita akan berubah menjadi “Nama Kita” + “Ganteng” (sebagai catatan saja, setelah kalian tekan tombol tersebut tidak lantas membuat wajah kalian ikutan jadi ganteng ya guys). Tulis kode kalian seperti di bawah:

Setelah kalian menjalankan kode tersebut dan menekan tombolnya, maka dia akan memanggil fungsi setDataName() dan menjalankan fungsi setState(), sehingga data nama di tampilan juga akan berubah.

Update State Bertipe Objek
Apabila kita punya state yang bertipe objek atau array, maka penangananya akan sedikit berbeda dengan penanganan pada tipe data primitif (integer, boolean, double, dll) guys. Ada satu kondisi yang harus diperhatikan yaitu, apakah objek atau array yang akan kita update adalah keseluruhan atau hanya sebagian saja (data objek tertentu atau index tertentu). Apabila data state array atau objek yang akan kita rubah adalah keseluruhanya maka kita bisa melakukanya dengan cara biasa yaitu:

this.setState({ dataStateArrayLama : dataStateArrayBaru })

atau

this.setState({ dataStateObjekBaru : dataStateObjekBaru })

Perhatikan contoh kode di bawah:

Setelah kalian tekan tombol maka kalian bisa melihat bahwa datanya akan berubah menjadi data yang baru. Sekarang bagaimana jika kasusnya adalah kalian hanya ingin merubah sebagian data saja ? misalnya dalam contoh di atas kalian hanya ingin merubah data age nya saja ? Kita tidak bisa merubah data state tersebut dengan cara:

this.setState({ dataStudent.age: dataBaru } )

Sebelum saya lanjutkan penjelasannya, coba kalian berhenti membaca sejenak, kemudian pikirkan bagaimana caranya jika kalian hanya ingin merubah data age saja hayo? Kalian bisa mencoba langsung dengan menulis kodenya.

this.setState({
     name: this.state.dataStudent.name
     Age: newAge,
     Hobby: this.state.dataStudent.hobby
})

Untuk cara lainya, adalah dengan menggunakan prevState. Ganti fungsi changeAgeData() menjadi seperti di bawah:

this.setState(prevState => ({
     ...prevState,
     dataStudent,
     …prevState.dataStudent,
     age: 20
}))

Mudah bukan ? Nah untuk data objek sudah selesai, berikutnya saya akan jelaskan tentang bagaimana mengganti state yang bertipe array.

Update State Bertipe Array
Update data state yang bertipe array sebenarnya tidak jauh berbeda dengan cara merubah data bertipe objek. Saya akan menjelaskan dan membaginya ke dalam beberapa bagian yaitu, menambah data, menghapus data, dan yang terakhir adalah mengedit data state array di index tertentu.

Menambah Data
Untuk menambah data, kita bisa menggunakan apa yang disebut dengan spread separator (“…”). Untuk kode nya kurang lebih seperti ini:

this.setState({ dataStateArray: [...dataArrayBaru, dataStateArray ] })

Jika ingin menaruhnya di bagian akhir, kita tinggal memindah array baru di bagian belakang seperti ini:

this.setState({ dataStateArray, ...dataArrayBaru })

Menghapus Data
Untuk menghapus data, kita bisa menggunakan 2 cara, yaitu dengan bantuan array baru atau dengan menggunakan bantuan filter. Sekarang kita coba dengan menggunakan cara 1 yaitu dengan bantuan array baru, berikut kode nya:

Sekarang akan saya jelaskan kode di atas. Jadi pertama kita buat array dataStudent, kemudian kita butuh fungsi setDataStudent() untuk menampilkan data ke dalam aplikasi. Berikutnya, fungsi removeData() dengan parameter index, digunakan untuk menghapus data sesuai inputan index yang dimasukkan, dan fungsi tersebut akan dipanggil ketika tombol “HAPUS HENI” di tekan. Karena kita akan menghapus data si HENI, maka index yang dimasukkan adalah “1”. Variable temporaryData digunakkan untuk menyimpan data yang tidak ingin dihapus. Kemudian, setelah itu state studentData akan diisi dengan temporaryData,(Catatan yah, nama si HENI bisa diganti dengan siapa aja, dengan nama teman, nama istri atau nama pacar loh). Untuk cara selanjutnya yaitu dengan bantuan filter, kita cukup merubah fungsi removeData() menjadi seperti ini guys:

removeData = (index) => {
let temporaryData = this.state.dataStudent.filter((student,  studentIndex) => {
 If (index !== studentIndex) return student;
})
this.setState({ dataStudent: temporaryData });
}

Jadi seperti itu cara menghapus data di state array guys, kalian bisa menggunakan cara 1 atau cara 2. Sekarang kita akan bahas bagaimana jika kita pengen update data di index tertentu saja.

Update Data di Index Tertentu
Update data state array di index tertentu sebenarnya tidak jauh berbeda dengan cara menghapus data, kita bisa menggunakan bantuan data array baru atau dengan menggunakan bantuan map(). Cara update data dengan bantuan array baru kurang lebih seperti ini:

Sedangkan untuk cara dengan menggunakan map kita tinggal ubah fungsi updateData menjadi kode seperti di bawah:

updateData = (index) => {
    let newName = 'BARON';
    let temporaryData = this.state.dataStudent.map((student, studentIndex) => {
      if (studentIndex === index){ 
        return newName;
      }else {
        return student;
      }
    });
 
    this.setState({ dataStudent: temporaryData })
  }

Nah demikian penjelasan tentang state manajemen di react native. Selanjutnya kita akan bahas apa itu props? Mungkin teman-teman yang baru belajar dan masih belum tahu apa sih props itu? apa sih bedanya sama state? Yuk kita bahas.

Apa Itu Props?
Props adalah variabel yang digunakan untuk mengirimkan data dari parent component (Komponen induk) kepada child component(Komponen anak). Oke, sekarang coba ganti kode di file App.js kita dengan kode daftar pemenang lotre seperti di bawah (Setelah itu jalankan):

Terkadang dalam membuat aplikasi di react native, kita perlu memecah bagian komponen besar menjadi komponen yang lebih kecil. Tujuanya adalah agar kode tidak menumpuk banyak di satu file (memudahkan kita untuk melakukan debugging), atau bisa juga karena ada komponen yang dipakai di beberapa halaman, sehingga kita butuh membuat komponen global yang digunakan di beberapa halaman tersebut tanpa harus menulis ulang kode yang sama.

Nah dalam contoh disini, kita akan memecah data daftar nama pemenang menjadi komponen tersendiri. Pertama, buat file di folder root dengan nama “ListOfWinner.js”, kemudian tulis kode seperti berikut:

Setelah itu di file App.js, ubah kode sehingga menjadi seperti kode di bawah ya guys:

Setelah selesai, bisa kita lihat bahwa komponen ListOfWinner.js butuh data yang diambil dari state nya si App.js. Disinilah fungsi props yaitu untuk mengirim data dari parent(App.js) menuju child component(ListOfWinner.js). Di file App.js, kita tinggal mengirim data state kita dengan menambahkan nama props(“dataName”) dan juga nilainya(“this.state.dataName”), kemudian data tersebut akan ditangkap di file ListOfWinner.js dengan cara atau kode props.namaProps(“props.dataName”).

Sekarang kita sudah tau apa itu state, bagaimana manajemen di dalam state dan juga sekarang kita tahu apa itu props. Sebelum saya akhiri, ada pertanyaan yang saya ingin sampaikan. Pertama, bagaimana cara kita melakukan manajemen data, dimana data tersebut mungkin saling berkaitan atau dibutuhkan tidak hanya di 1 halaman saja, tapi di beberapa halaman? Pertanyaan kedua, apa kita bisa mengirim data dari 1 halaman ke halaman lain? Hal ini akan dibahas di tulisan saya berikutnya, inshallah.

Semoga tulisan saya bermanfaat, jika ada pertanyaan, masukkan atau saran silahkan tulis di kolom komentar. See you next time!

Contributor: Virginia Hendras