Skip to main content

Cara menggunakan useState atau Hooks untuk update data di dalam React Native Function Component

Nah, ini juga salah satu konsep sangat penting di dalam React Native world yang mau tidak mau wajib dikuasai.

Saya sempat bingung dan kesulitan memahami konsep dan prinsip kerja useState atau Hooks ini pada awalnya.

Meskipun demikian sedikit demi sedikit sepertinya saya mulai sedikit memahami prinsip dan cara kerjanya.

Hooks hanya akan kita temukan di dalam versi React yang baru. Tadinya denger-denger component lifecycle (perubahan state / kondisi data) hanya bisa dilakukan di dalam class Component

Sedangkan functional component pada awalnya hanya bersifat statis dan dibuat untuk keperluan mengatur tampilan saja.

Namun pada perkembangannya dibuatlah "hooks" yang membuat functional component yang tadinya stateless component (komponen yang tidak bisa digunakan untuk mengatur state / kondisi data seperti updating data dsb) menjadi komponen yang bisa memiliki kemampuan mengatur state data.

Ini dimungkinkan dengan penggunaan {useState} yang terdapat di dalam library React.

Cara menggunakan {useState}

Penggunaan useState dikarakterisasi dengan pendefinisian variable yang berpasangan, misal "email" dan "setEmail", "nama" dan "setNama", "umur" dan "setUmur"

Polanya demikian. Variabel yang didefinisikan di awal adalah variable yang akan kita pakai dan selalu bisa diupdate state-nya (isi datanya), sedangkan variable yang kedua adalah variable khusus yang sebenarnya berupa fungsi yang digunakan untuk melakukan update state / update data sesuai kondisi yang kita tetapkan.

Contohnya:

cara menggunakan useState cara mendefinisikan variable dalam useState

Di sini saya misalnya mendefinisikan variable "token" yang nantinya akan saya rujuk untuk mendapatkan data token di dalamnya. Variable token ini selalu bisa diupdate state (kondisinya) dengan variable kedua (yang sebetulnya akan menjadi sebuah fungsi) setToken (ingat selalu aturan bahwa pola/pattern pendefinisian untuk useState adalah menggunakan pola menambahkan kata "set" pada nama variable awal yang huruf depannya telah diubah menjadi kapital -> contohnya menjadi "setToken".

Kemudian, initial value, atau value/isi awal dari variable tersebut kita isikan di dalam useState(<isikan di sini>) sehingga inilah yang menjadi kondisi awal data kita (baseline data di dalam state).

Isian ini bisa berbagai tipe data, bisa string (' '), number, list/array ([ ]), javascript object ({ }), boolean (true atau false), dsb.

Dalam contoh di atas, data isian awal untuk state pada variable name, email, dan photo merupakan data yang didapatkan dari screen sebelumnya yang dipassing/dikirimkan melalui route.params. Ini juga bisa kita pakai sebagai data awal di dalam state.

Updating state data dalam variable

Nah, berikutnya bagaimana cara kita mengupdate state data di dalam variable yang telah kita definisikan?

Update terhadap state data kita perlukan saat terjadi suatu proses yang dilakukan user. Misalnya, saat user memasukkan data namanya atau emailnya ke dalam TextInput maka kita perlu melakukan update terhadap data yang ada di dalam variable sehingga merepresentasikan data terkini.

Dari sini, setelah data di dalam state diupdate data tersebut dapat dikirimkan ke backend (misal API) sehingga bisa diolah atau diproses, misal untuk didaftarkan ke dalam sistem (registrasi), untuk melakukan login/signin ke dalam aplikasi, dan sebagainya.

Untuk update data ini, kita dapat melakukannya melalui suatu tombol / button yang telah diassign dengan fungsi untuk mengupdate data tadi, atau bisa juga dijalankan melalui {useEffect} pada saat komponen loading (useEffect ini merupakan alternatif dari componenDidMount di dalam class Component React native).

Caranya bagaimana luur...

contoh cara update data dengan useState

Nah, contohnya saya di sini mendefinisikan data riwayat donasi (yang isi datanya saya ketahui dari dokumentasi API-nya adalah berupa data array) dan setRiwayat yang akan menghandle jika saya ingin mengupdate data di dalam variable riwayat.

Di awal definisi, isi dari variable riwayat hanyalah sebuah array kosong ([ ]). Tidak ada isinya/data kosong. Namun, setelah saya melakukan request ke API untuk mendapatkan riwayat donasi, maka didapatkan suatu response data yang diberikan oleh API ke aplikasi saya.

Untuk itu saya harus menghandle/menerima data tersebut dan meletakkannya ke tempat penampungan yang sudah saya sediakan yaitu variable riwayat. Bagaimana caranya?

Nah, caranya dengan menjalankan variable kedua yang telah kita definisikan sebelumnya bersamaan dengan variable riwayat yakni variable setRiwayat.

Maka setelah mendapatkan response data dari API dan memastikan bahwa data yang kita dapatkan sudah tepat (dengan melakukan console.log sehingga kita bisa memeriksa data yang kita dapatkan lebih dahulu di RN debugger atau di Metro console, atau dengan sebelumnya menggunakan Postman Canary untuk melakukan request secara manual ke API dan menginspeksi data response yang didapatkan) kita dapat mengupdate variable riwayat dengan mudah.

Kita tinggal memanggil setRiwayat di dalam block kode .then (kondisi request sukses) di dalam Axios request dan mengupdate variable dengan memasukkan data response yang telah kita dapatkan tersebut.

Dengan demikian, pada saat ini, variable riwayat sudah tidak lagi berupa array kosong melainkan sudah terisi dengan array of object yang kita dapatkan saat kita melakukan request ke API.

Contoh response datanya seperti ini:

cara mengakses API dengan Postman Canary

Nah, dari sini kita tinggal mengakses datanya dengan dot notation dan kita bisa menampilkannya di dalam FlatList.

Ok.. segini dulu, semoga bermanfaat!

Comments

Popular posts from this blog

Belajar Coding Intensive Bootcamp Online 300 ribuan selama Sebulan dapat apa saja?

Sekedar catatan sedikit tentang apa yang saya pelajari saat mengikuti online intensive coding bootcamp kelas project React Native selama sebulan kemarin. Pada umumnya cukup menantang karena setiap hari harus catch up dengan materi yang diberikan dan tugas harian (ya, tugasnya pun setiap hari, jadi peserta mau tidak mau harus coding tiap hari). Selain itu ada quiz tiap akhir pekan atau dalam kasus kelas project tiap akhir pekan harus menyelesaikan Mini Project yang merupakan bagian dari Final Project. Lalu apa saja yang dipelajari selama sebulan tersebut? (dengan biaya Rp 300 K itu? *atau Rp 200K karena saya dapat voucher 100rb). Beberapa hal yang saya pelajari: SplashScreen dan onBoarding  Register (dengan OTP)  Login (dengan JWT ke API Sanbercode, Google Sign In dengan firebase, serta local sign in dengan sidik jari / fingerprint)  Passing data dengan menggunakan route.params melalui navigation, passing data dengan konteks ({useContext}) serta melalui props  Home Page kekinian meman

Cara Mengambil Foto dengan RNCamera dan Upload Foto ke API di React Native

Berikut ini catatan singkat saya saat belajar mengambil dan upload foto ke API menggunakan React Native yang saya pelajari saat mengikuti Indonesia Mengoding Intensive Coding Bootcamp React Native Kelas Project yang diadakan Sanbercode. Sebelumnya, bukan bermaksud iklan, namun pengalaman saya mengikuti batch online intensive coding bootcamp di Sanbercode cukup recommended (khususnya jika kita sudah memiliki sedikit saja dasar pengetahuan programming. Jika belum ada dasar pengalaman pemrograman, Sanbercode juga menawarkan kelas dasar yang bisa diikuti pemula). Jadi ini adalah honest review. Saya sendiri telah mengambil kelas Laravel Web Devt (30 hari), React Native Dasar (30 hari) dan React Native lanjutan atau kelas project (30 hari). Investasi totalnya hanya 700 ribu rupiah (3 bulan intensive online bootcamp!), itu jika tanpa potongan.  Dengan biaya 200 ribu rupiah untuk kelas dasar dan 300 ribu rupiah untuk kelas project, saya rasa jika dibandingkan Coding Bootcamp lain yang harga

Cara atau Solusi Mengatasi java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native

 Pernah mengalami error java.lang.OutOfMemoryError :app:mergeDexRelease FAILED saat Build APK di React Native? Ente nggak sendirian Ndan .. Saya juga pernah mengalami error serupa..   Cara mengatasi / solusi / obatnya ternyata cukup simple. Untuk memastikan bahwa pada saat build APK/AAB tidak terjadi OutofMemory error, kita bisa melakukan setting pada file gradle.     Nah, udah tenang kalau sudah ada build successfull hehe.. Semoga bermanfaat..