Anda mungkin membaca ini karena Anda menyadari bahwa aplikasi reaksi Anda memerlukan beberapa pengeboran pendukung tetapi Anda ingin menemukan cara yang lebih baik untuk melakukannya. Pengeboran penyangga menjadi membuat frustrasi dan sibuk pada aplikasi yang lebih besar dan juga tidak disarankan. Di sinilah React Context muncul.

React Context adalah fitur canggih yang memungkinkan Anda meneruskan data ke pohon komponen tanpa harus meneruskan props melalui setiap level. Pada artikel ini, kita akan membahas cara menggunakan React Context dan kapan saat yang tepat untuk menggunakannya.

Apa itu Konteks React?

React Context adalah cara untuk berbagi data antar komponen dalam aplikasi React tanpa harus meneruskan props melalui setiap level pohon komponen. Sebagai gantinya, Anda dapat membuat objek konteks dan meneruskannya ke komponen mana pun yang memerlukannya.

Berikut ini 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 Konteks React

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

Komponen penyedia digunakan untuk membungkus komponen apa pun yang memerlukan akses ke konteks. Berikut 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 ini contohnya:

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

Dalam contoh ini, MyContext.Consumer adalah komponen konsumen, dan parameter value adalah nilai yang diturunkan 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 kita membuat konteks yang disebut 'FavoritesContext' yang berisi array 'favorites' dan jumlah 'totalFavorites'. Lalu kita membuat objek 'konteks' untuk digunakan sebagai prop nilai di dalam ‹FavoritesContext.Provider›. Kami kemudian menggunakan ‘{props.children}’ untuk meneruskan semua elemen turunan ke bawah pohon. Dengan cara ini semua komponen anak akan dapat 'useContext(FavoritesContext)' dan mengakses objek 'favorites' dan nilai 'totalFavorites'.

Kapan Menggunakan Konteks React

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

  • Ketika Anda memiliki data yang perlu dibagikan oleh beberapa komponen yang tidak berhubungan langsung satu sama lain.
  • Ketika Anda memiliki data yang perlu diakses oleh komponen yang sangat bertingkat.
  • Ketika Anda memiliki data yang perlu diakses oleh sejumlah besar komponen.

Secara umum, Anda sebaiknya menghindari penggunaan React Context untuk data yang hanya perlu diakses oleh beberapa komponen yang terkait erat. Dalam situasi tersebut, meneruskan props ke bawah pohon 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 meneruskan props melalui setiap level pohon komponen dan membuat kode Anda lebih mudah dibaca dan dipelihara.

Namun, penting untuk menggunakan React Context dengan bijaksana dan hanya jika diperlukan. Dengan mempertimbangkan secara cermat kapan menggunakan React Context dan kapan menggunakan teknik lain seperti passing props, Anda dapat menulis kode yang lebih bersih, lebih mudah dipelihara, dan membuat aplikasi React Anda lebih efisien dan mudah dipahami.