Apa itu useContext di React?
useContext adalah hook di React yang digunakan untuk berbagi data secara global antar komponen tanpa perlu meneruskan data tersebut melalui props di setiap level komponen. Ini memungkinkan komponen di berbagai level dalam aplikasi mengakses data atau state langsung dari context yang disediakan.
Apa itu Context di React?
Context di React adalah fitur yang memungkinkan kita berbagi data secara global di seluruh komponen, tanpa harus meneruskannya melalui props dari satu komponen ke komponen lainnya. Context biasanya digunakan untuk data yang harus diakses oleh banyak komponen, seperti tema aplikasi (light/dark mode), data pengguna, atau status autentikasi.
Kapan kita menggunakan useContext?
Kita menggunakan useContext ketika:
- Data atau state perlu diakses oleh beberapa komponen di berbagai level dalam hierarki komponen.
- Ingin menghindari prop drilling (meneruskan props terlalu jauh melalui beberapa komponen).
- Ingin membagikan data global seperti tema, status login, preferensi pengguna, atau konfigurasi aplikasi.
Apa itu Prop Drilling?
Prop drilling adalah situasi di mana kita harus meneruskan props melalui beberapa level komponen, meskipun hanya komponen di level yang lebih dalam yang benar-benar membutuhkannya. Ini bisa membuat kode sulit dipelihara dan membingungkan. useContext membantu menghindari masalah ini dengan memberikan akses langsung ke data tanpa harus melalui props di setiap level.
Bagaimana cara membuat Context di React?
- Gunakan createContext()
import { createContext } from 'react';
export const MyContext = createContext();- Bungkus komponen yang ingin mengakses data context dengan Provider dari context yang Anda buat.
<MyContext.Provider value={/* nilai yang ingin dibagikan */}>
{/* Komponen yang bisa mengakses context */}
</MyContext.Provider>Apa itu Provider dalam useContext?
Provider adalah komponen yang digunakan untuk “membungkus” komponen lain dan menyediakan data atau state dari context kepada mereka. Provider menerima value sebagai prop, yang merupakan data atau state yang akan dibagikan.
Dimana sebaiknya kita meletakkan Provider?
- Jika state atau data perlu diakses oleh banyak komponen di seluruh aplikasi, letakkan Provider di tingkat yang sangat tinggi, misalnya di komponen root (App.js).
- Jika hanya sebagian kecil aplikasi yang membutuhkan context, letakkan Provider di komponen yang lebih dekat dengan komponen yang memerlukan data tersebut.
Bagaimana cara menggunakan useContext di komponen?
Untuk menggunakan data dari context, gunakan hook useContext di dalam komponen:
import { useContext } from 'react';
import { MyContext } from './MyContext';
function MyComponent() {
const contextValue = useContext(MyContext);
// Gunakan contextValue di sini
}
Apa perbedaan antara menggunakan useContext dan props biasa?
- Props digunakan untuk meneruskan data dari komponen induk ke komponen anak secara langsung. Namun, ini bisa menjadi rumit jika data perlu diteruskan melalui banyak level komponen (prop drilling).
- useContext memungkinkan akses data secara langsung dari context global tanpa perlu meneruskan props melalui beberapa level komponen, sehingga menghindari prop drilling.
Bisakah kita menggunakan beberapa Context di satu komponen?
Ya, kita bisa menggunakan beberapa context di satu komponen dengan membungkus Provider dari context yang berbeda secara berlapis, atau memanggil beberapa kali useContext di dalam komponen.
<AuthContext.Provider value={authValue}>
<ThemeContext.Provider value={themeValue}>
{/* Komponen di sini bisa mengakses kedua context */}
</ThemeContext.Provider>
</AuthContext.Provider>
Apa yang terjadi jika nilai dari context berubah?
Jika nilai yang diberikan oleh Provider berubah, semua komponen yang menggunakan useContext untuk mengakses context tersebut akan rerender dengan nilai context yang baru. Inilah mengapa useContext berguna untuk mengelola state yang berubah, seperti tema atau status login.
Apa kelemahan dari useContext?
- Semua komponen yang menggunakan context akan rerender ketika nilai context berubah, bahkan jika perubahan hanya relevan untuk sebagian komponen saja. Hal ini bisa berdampak pada performa jika tidak dikelola dengan baik.
- Tidak cocok untuk semua jenis manajemen state yang kompleks, terutama jika ada logika bisnis yang rumit. Dalam kasus seperti itu, library lain seperti Redux mungkin lebih sesuai.
Kapan sebaiknya tidak menggunakan useContext?
- Jika state yang Anda kelola terlalu besar atau terlalu sering berubah, sehingga menyebabkan banyak rerender di seluruh aplikasi.
- Jika Anda perlu manajemen state yang lebih kompleks dengan banyak aksi dan reducer. Dalam kasus seperti ini, mungkin lebih baik menggunakan Redux, MobX, atau library lain untuk manajemen state global.
