GALIH L. PRAKOSO

Ada dua tipe data yang bisa digunakan untuk mengontrol Component. Yang pertama udah kita pelajari di bagian sebelumnya yaitu props dan yang kedua akan kita pelajari pada bagian ini yaitu state.

Apa perbedaan props dan state? 

Props adalah data yang diatur oleh parent dari sebuah Component dan nilainya tidak dapat diubah di dalam Component itu sendiri. Props akan tetap tersimpan selama lifetime dari Component tersebut. Sedangkan state adalah data yang diinisalisasi di dalam Component dan nilainya dapat diubah di dalam Component tersebut.

Pada tutorial sebelumnya kita kan sudah bisa menampilkan custom component yang kita buat sendiri disitu kita juga sudah belajar tentang apa itu props. Nah kali ini kita akan menambahkan state pada custom component yang kita buat. Sebenarnya yang akan kita buat ini mirip dengan dokumentasi yang ada di situs resmi React Native. Dengan state, kita akan membuat teks yang ada dalam component Pahlawan berkedip. Yuk, langsung saja buka file App.js dan tambahkan kode baru seperti di bawah ini :

Perhatikan method componentDidMount(). Disitulah kita akan mulai membuat teksnya berkedip. Method componentDidMount() dipanggil setelah method render() dipanggil. Kalian bisa melihat lifecycle dari component pada tutorial sebelumnya.

Pada kode diatas kita memanfaatkan fungsi dari javascript bernama setInterval(). Fungsi tersebut akan mengeksekusi method secara berulang-ulang sesuai dengan delay yang sudah ditentukan.

Jika berhasil, maka teks yang ada dalam component Pahlawan berkedip setiap satu detik sekali. Jika error silahkan bertanya di kolom komentar agar kita bisa solve sama-sama. 😉

Kenapa kita mengubah state menggunakan fungsi setState()?

Karena dengan menggunakan fungsi setState(), component akan tahu jika ada data yang diubah di dalam state. Setelah tahu ada data yang berubah dalam state, maka Component akan memanggil ulang method render() untuk memperbarui tampilan dalam aplikasi.

Yak, kira-kira begitulah penjelasan tentang apa itu state dalam component React Native. Seperti biasa, jika ada pertanyaan silahkan tinggalkan komentar. Jika tidak, silahkan lanjut ke tutorial selanjutnya. 😁👇

Tutorial React Native Dasar - Bahasa Indonesia - #7 Style