Mengenal ‘Render Prop’ di React

Jacky Efendi
Jul 14, 2018 · 4 min read

Dalam pengalaman seorang engineer menulis code dengan React, code reusability adalah salah satu masalah yang sering dihadapi, entah ketika menulis sebuah library atau mengembangkan web-app untuk kantor tempat Anda bekerja. Ada banyak pendapat untuk menjawab masalah ini, salah satu contoh yang paling umum adalah menggunakan pola Higher-order Component, yang akrab dipanggil HoC. Tapi hari ini kita gak akan ngomongin soal HoC, tapi mengenai sebuah pola lain yang namanya Render Prop.

Code yang digunakan di dalam tulisan ini dapat diakses di repo ini.

Apa itu render prop?

Sebelum kita mulai, mungkin kita bisa lihat dulu definisi render prop dari dokumentasi React sendiri:

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. — reactjs.org

Intinya, render prop adalah pola dimana kita mem-passing sebuah prop, yang value-nya adalah sebuah function, ke sebuah komponen. Kemudian komponen itu akan menggunakan prop tersebut untuk melakukan render. Tujuannya adalah agar kedua komponen ini bisa saling berbagi logic dan code di antaranya.

Di dokumentasi React sendiri sebenarnya sudah ada contoh implementasinya, tapi agar tulisan ini lebih menarik (dan lebih berisi) kita akan coba mengimplementasi pola render prop ini sendiri untuk kasus fetching data dari sebuah API.

Data yang digunakan: xkcd comics

Sebenarnya xkcd punya API sendiri, tetapi kalau mau diakses langsung, itu masih kena CORS. Jadi, untuk contoh ini, kita akan menggunakan xkcd-api yang dibuat oleh mrmartineau, yang sudah ada workaround-nya untuk masalah CORS ini.

API ini sangat sederhana, kita hanya perlu mengirimkan request GET ke alamat: https://xkcd.now.sh/1000

Dan kemudian kita akan mendapatkan response seperti ini:

{
"month": "9",
"num": 1892,
"link": "",
"year": "2017",
"news": "",
"safe_title": "USB Cables",
"transcript": "",
"alt": "Tag yourself, I'm \"frayed.\"",
"img": "https://imgs.xkcd.com/comics/usb_cables.png",
"title": "USB Cables",
"day": "20"
}

Fetching Data dari API, cara paling basic

Misalkan kita punya sebuah komponen Comic, tanpa menggunakan package-package lain, biasanya kita akan melakukan proses fetch di cycle componentDidMount(). Lalu setelah mendapat response, kita akan menyimpan data yang kita perlukan di state menggunakan this.setState(). Kemudian, kita menampilkan value yang sudah tersimpan di state di render().

Code-nya berjalan, tidak ada masalah.

Tapi coba pikirkan, bagaimana jika ada komponen lain yang juga perlu melakukan fetch data, misalnya data profil seorang engineer. Apakah kita harus membuat sebuah komponen baru Engineer yang kemudian akan melakukan fetch di dalam componentDidMount()-nya sendiri juga?

Cara tersebut memang bisa dilakukan, tapi hal ini berarti code yang kita tulis di dalam komponen Comic ini tidak reusable.

Dengan Pola Render Prop

Ide utamanya adalah, kita akan membuat sebuah komponen lain yang akan melakukan fetch, dan kemudian hasil fetch tersebut akan dikembalikan ke komponen Comic. Kita beri saja nama komponen ini Fetch .

Kalau kita lihat di code Fetch.js, kita bisa lihat bahwa komponen ini menerima props url bertipe string dan render bertipe function. Komponen ini akan melakukan fetch ke url tersebut, kemudian datanya akan disimpan dalam state. Di dalam render(), kita bisa lihat bahwa komponen ini tidak me-render elemen apapun. Elemen ini hanya menjalankan function this.props.render dengan mengirimkan this.state sebagai argumen-nya. Inilah yang disebut dengan pola render prop. Kita menggunakan sebuah prop untuk melakukan render. Perlu diperhatikan bahwa nama dari prop yang digunakan tidak harus render. Di contoh ini kita pakai nama render agar lebih jelas saja.

Nah, sekarang kita perlu memperbarui code untuk komponen Comic untuk memanfaatkan komponen Fetch baru kita ini.

Kita lihat di render()milik Comic, ada komponen Fetch yang diberi propsurl dan render. Value dari prop render adalah this.renderContent, sebuah function!

Kalau kita perhatikan, komponen Fetch akan memanggil prop render dengan mengirimkan this.state (state milik komponen Fetch) sebagai argumen. Hal ini memungkinkan kita untuk meng-akses state milik Fetch di dalam renderContent milik Comic.

Jadi setelah mutar-mutar gitu, untungnya apa?

Memang yang kita lakukan agak sedikit mutar-mutar. Tapi, dengan menggunakan pola ini, kita sudah berhasil mengeluarkan logic untuk melakukan fetch dari komponen Comic. Jika ada komponen lain yang perlu untuk melakukan fetch juga, maka komponen Fetch ini bisa digunakan lagi.

Kesimpulan

Penggunaan pola render prop dapat membantu kita untuk menulis code yang lebih reusable, dengan tetap mudah dibaca dan dimengerti. Ada banyak kasus yang dapat kita handle menggunakan pola ini, tapi memang perlu effort untuk mengenali kasus-kasus tersebut. Dengan lebih sering mempraktekkan penggunaan pola ini, kita juga bisa lebih mudah mengenali ketika ada bagian dalam code kita yang dapat di-improve dengan menerapkan pola ini.

Jacky Efendi

Written by

Software Engineer @ Tokopedia - opinions I write are my own and not necessarily the views of my employer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade