Komunikasi Data antar Component React
— Intro
Setelah memahami cara kerja prop & state, umumnya pertanyaan selanjutnya adalah bagaimana component berkomunikasi satu sama lain. Sebagai contoh
- Bagaimana mengirim data dari component A ke component B ( passing data ) ?
- Bagaimana cara mengubah component A ketika componet B di klik ( action ) ?
- Bagaimana menjaga data tidak hilang ketika berpindah halaman atau layar ?
Ada 2 hal penting dan tidak bisa dipisahkan dalam component react yaitu data & UI. Data di representasikan dalam format javascript object
Cara kerjanya sederhana, ketika data berubah maka UI otomatis berubah. Tapi apakah jika UI di rubah data juga otomatis berubah? Tidak. Inilah yang di sebut dengan One-Way Data Flow.
One-Way Data Flow vs Two-Way Data Binding
Singkat cerita, sebelum react lahir konsep two-way data binding lebih dulu populer di dunia frontend. Cara kerjanya, ketika data berubah maka UI berubah, begitu juga sebaliknya. Framework seperti angular dan ember menggunakan turut mempopulerkan konsep ini.
Tapi ternyata banyak developer merasa performance dari konsep ini kurang baik ketika aplikasi semakin besar, akhirnya facebook memperkenalkan react dengan konsep one-way data flow yang di dasari oleh functional programming.
Berbeda dengan two-way data binding, merubah UI tidak otomatis mengubah data. Aliran datanya akan tetap satu arah itu sebabnya disebut one-way data flow. Cara untuk merubahnya menggunakan teknik callback.
Kedua konsep ini mirip seperti analogi jalan satu arah dan dua arah, keduanya memiliki kelebihan dan kelemahan masing-masing. React memilih one-way data flow untuk alasan performance, scalability, dan single source of truth.
Component Hierarcy
Semua yang kita lihat pada aplikasi react adalah component. Komunikasi data antar component lebih mudah dipahami dengan hierachy component. Setiap aplikasi react wajib memiliki satu root component. Root component ini nanti nya akan memiliki sub-component.
Dari struktur component diatas ada beberapa kemungkinan komunikasi data :
- Parent to Child
- Child to Parent
- Sibling
Mari kita lihat implementasi nya pada contoh aplikasi Todo :
Parent to Child — Props
Untuk mengirim data dari parent → child component gunakan props.
- Dari contoh aplikasi di atas, Parent Component <App/> mengirim data ke child component <TodoItems todos={data}/> dengan props. Selanjutnya data tersebut bisa dibaca di component TodoItems dengan perintah this.props.todos
- Data dalam props bisa berupa object atau function. Pada contoh ini method _actionDelete() di kirim melalui props yang nantinya akan menjadi callback dan dieksekusi di component TodoItems
Child to Parent — Callback & State
Untuk mengirim data dari child → parent, gunakan callback dan state
Disini kasusnya adalah bagaimana mengupdate state parent component dari child component. Solusinya menggunakan callback ke function yang telah di defenisikan sebelumnya di parent component yaitu actionDelete() dan actionFinish(). Dengan kata lain child component melakukan request ke parent component untuk mengubah statenya. Ketika state berubah secara otomatis parent component dan sub componentnya akan di render ulang
Sibling
Untuk komunikasi antar component yang masih 1 level harus menggunakan parent sebagai perantara. Sebagai contoh kasus pada app ini, ketika component <TodoInput/> menerima input maka <TodoItems/> harus mengupdate list nya.
Solusinya hampir sama dengan child to parent. Component <TodoInput/> melakukan callback ke parent component dan selanjutnya parent component menerima input dan merender ulang semua child component termasuk <TodoItems/>
Deep Hierarchy
Ada saatnya ketika component berkomunikasi dengan kedalaman yg jauh, sebagai contoh component parent ke grandchild
Solusi menggunakan component perantara ( intermediary component ) untuk kasus ini memang membutuhkan effort yang lebih banyak dari sisi code, apalagi jika tingkat kedalamannya semakin banyak. Pada saat seperti ini sebaiknya gunakan redux. Redux itu hanya library kecil tapi ….
→ Source code lengkap react native simple todo silahkan cek disini
Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share. Jika anda tertarik belajar lebih dalam tentang react native silahkan isi email anda disini
