Cara Berbagi Data Antar Komponen React Seperti Profesional: Panduan Menggunakan Konteks

React Context adalah fitur canggih yang memungkinkan Anda meneruskan data ke tree komponen tanpa harus melewati properti melalui setiap level. Dalam artikel ini, kita akan membahas cara menggunakan React Context dan kapan waktu yang tepat untuk menggunakannya.

Apa itu React Context?

React Context adalah cara untuk berbagi data antar komponen dalam aplikasi React tanpa harus melewatkan prop melalui setiap level dari tree komponen. Sebagai gantinya, Anda dapat membuat objek konteks dan meneruskannya ke komponen mana pun yang membutuhkannya.

Berikut adalah contoh cara membuat objek konteks:

const MyContext = React.createContext(defaultValue);

Parameter defaultValue bersifat opsional dan dapat digunakan untuk menetapkan nilai default untuk konteks jika belum disediakan oleh komponen induk.

Cara Menggunakan React Context

Untuk menggunakan objek konteks, Anda perlu menggunakan dua komponen: penyedia dan konsumen.

Komponen penyedia digunakan untuk package komponen apa pun yang memerlukan akses ke konteks. Ini contohnya:

<MyContext.Provider value={/* some value */}>
  <MyComponent />
</MyContext.Provider>

Dalam contoh ini, MyContext.Provider adalah komponen penyedia, dan MyComponent adalah komponen anak yang memerlukan akses ke konteks.

Untuk mengakses konteks di MyComponent, Anda perlu menggunakan komponen konsumen. Berikut contohnya:

<MyContext.Consumer>
  {value => /* render something with value */}
</MyContext.Consumer>

Dalam contoh ini, MyContext.Consumer adalah komponen konsumen, dan parameter value adalah value yang diwariskan oleh komponen penyedia.

Contoh Lengkap

Komponen konteks halaman favorit :

import { createContext, useState } from “react”;

const FavoritesContext = createContext({
 favorites: [],
 totalFavorites: 0,
});

function itemIsFavoriteHandler(meetupId){
 return userFavorites.some(meeetup=> meetup.id===meetupId)
 }

const context = {
 favorites: userFavorites,
 totalFavorites: userFavorites.length,
 itemIsFavorite: itemIsFavoriteHandler
 }

return <FavoritesContext.Provider value={context}>
 {props.children}
 </FavoritesContext.Provider>
}

export default FavoritesContext;

Dalam contoh ini kami membuat konteks yang disebut 'FavoritesContext' yang berisi larik 'favorit' dan jumlah 'totalFavorit'. Kemudian kita membuat sebuah objek 'context' untuk digunakan sebagai prop nilai di dalam <FavoritesContext.Provider>. Kami kemudian menggunakan '{props.children}' untuk meneruskan semua elemen turunan ke bawah tree. Dengan cara ini semua komponen turunan dapat 'useContext(FavoritesContext)' dan mengakses objek 'favorites' dan nilai 'totalFavorites'.

Kapan Menggunakan React Context

Bereaksi Konteks adalah alat yang ampuh, tetapi tidak selalu diperlukan untuk menggunakannya. Berikut adalah beberapa situasi di mana penggunaan React Context mungkin sesuai:

Saat Anda memiliki data yang perlu dibagikan oleh beberapa komponen yang tidak terkait langsung satu sama lain.
Saat Anda memiliki data yang perlu diakses oleh komponen bersarang dalam.
Ketika Anda memiliki data yang harus diakses oleh banyak komponen.

Secara umum, Anda harus menghindari penggunaan React Context untuk data yang hanya perlu diakses oleh beberapa komponen yang terkait erat. Dalam situasi tersebut, meneruskan prop ke tree komponen biasanya sudah cukup.

Kesimpulan

React Context adalah fitur canggih yang dapat mempermudah berbagi data antar komponen dalam aplikasi React. Dengan menggunakan objek konteks, Anda dapat menghindari melewatkan prop melalui setiap level tree komponen dan membuat kode Anda lebih mudah dibaca dan dipelihara.

Namun, penting untuk menggunakan React Context dengan bijak dan hanya jika sesuai. Dengan mempertimbangkan dengan hati-hati kapan harus menggunakan React Context dan kapan harus menggunakan teknik lain seperti meneruskan props, Anda dapat menulis kode yang lebih bersih, lebih mudah dipelihara, dan membuat aplikasi React Anda lebih efisien dan lebih mudah dipahami.