by Bloger Lumoshive Ara

May 26, 2022

Begini Fungsi Render Props Dan Render di React

 

Hallo sahabat Lumoshive, pada kesempatan kali ini kami akan mengajak kamu untuk mengenal apa itu Render Props di React yang kemungkinan dapat bermanfaat untuk Anda.

Apa itu Render Props di React

Render props adalah pola dalam reaksi yang membantu kita meneruskan fungsi sebagai prop ke komponen sehingga kita dapat memutuskan logika rendering komponen alih-alih membiarkan komponen merender logikanya sendiri.

Apa itu Fungsi Render?

Render fungsi (atau anak-anak sebagai fungsi) dapat memberikan lebih banyak fleksibilitas dan kekuatan. Jika Anda menggunakan komponen React yang populer, Anda mungkin menemukan teknik fungsi render di React-motion, Apollo-client, dan React-router yang bisa dimanfaatkan ke fungsi render dengan sangat baik agar bisa membangun komponen yang fleksibel dan dapat digunakan kembali.

Fungsi render memungkinkan Anda untuk mengenkapsulasi logika yang menurunkan status tertentu dalam suatu komponen dan memaparkan status tersebut ke komponen induk kita.

Seperti contoh dibawah ini, yang membuat komponen agar mendapatkan data dari jsonplaceholder API. Maka komponen ini, akan memiliki status yang berbeda seperti, loading, error, empty, dan render of the list of users. Selanjutnya gunakan render props dan fungsi render dengan untuk mengabstraksi logika rendering ke komponen Anda.

Itu karena props render dan fungsi render komponen list pada contoh di bawah dapat digunakan kembali untuk merender daftar apapun.

List/index.js:

 

Jadi, alat peraga akan membuat status pemuatan, kesalahan, item dan fungsi masing-masing yang membantu Anda untuk merender komponen. Namun, tergantung pada statusnya seperti yang sudah Anda lihat pada fungsi on Error atau merender komponen ketika ada kesalahan pada on Loading ketika status itu dimuat. Tetapi, bagian terpentingnya ada pada on Empty dimana Anda akan mendapatkan nilai yang dapat dimanfaatkan ke fungsi render.

 

Contoh App.js Menggunakan Komponen List

Sebagai contoh App.js berikut ini:

 

 

App.js bisa terbilang memiliki fungsi yang dapat digunakan sebagai props render. Untuk mendapatkan pengguna try catch ini, bergantung pada hasil status yang diubah melalui fungsi handle Status.

Pada bagian ini kamu akan mendeklarasikan fungsi on Loading dengan membuat teks yang akan memuat seperti fungsi on Error dan on Empty. Tujuannya adalah untuk mengubah fungsi on loading dan membuat komponen deskriptif agar dapat mempermudah untuk mengamati perbedaan status yang sudah Anda miliki.

Fungsi render ini akan membantu Anda merender item yang merupakan fungsi:

 

const renderItem = (item) => <p key={item.id}>{item.name}</p>;

 

Contoh diatas item yang merupakan parameter dan anda akan merender nama item melalui paragraf dan menggunakan Id sebagai kunci.

Namun, melewati fungsi yang sama, melalui komponen dan daftar tujuannya untuk memasukkannya ke dalam peta item dan merupakan cara agar dapat menggunakan fungsi render. Tetapi, jika Anda ingin mengubah komponen setiap item Anda perlu melakukan cara yang sama di fungsi render Item. 

Tujuannya adalah agar bisa mengabstraksi semua logika render dan menjadikan List sebagai komponen untuk merender daftar apapun dan komponen yang di render bergantung pada status  yang ingin Anda sesuaikan.

Dengan melalui alat peraga ini, Anda bisa mendapatkan status pemuatan, kesalahan, item, dan fungsi dari masing-masing yang dirender ke dalam komponen. Namun, bergantung pada status fungsi on Loading dan On Empty ini, ketika status itu sedang dimuat Anda bisa memanfaatkan fungsi render.

 

Sumber:

 

Membungkus

Terima kasih sudah menyisihkan sedikit waktu untuk membaca artikel diatas. Jika Anda tertarik untuk bekerja sama dengan Lumoshive Anda dapat menghubungi kami melalui :

Email : [email protected]

Instagram : @lumoshive.official

 

Sampai jumpa dilain hari dengan artikel selanjutnya!!

 

Related Post

Pengembangan Web Front-End dengan React

by Bloger Lumoshive Ara

May 19, 2022

0

  Hallo sahabat Lumoshive, pada kesempatan kali ini kami akan mengajak Anda untuk memahami m...