← React47 / 78
Perangkap Performa Context
Setiap kali value pada Context Provider berubah, SELURUH komponen konsumen akan di-render ulang. Pisahkan state yang sering berubah dari state yang jarang berubah.
👀 Contoh dulu
// Pisahkan UserContext (jarang berubah) dan NotificationContext (sering berubah)
Hasilnya: Mencegah re-render yang tidak perlu pada seluruh pohon komponen.
💡 Memisah Provider adalah teknik optimasi utama pada React Context.
📝 Sekarang giliranmu
Buat sebuah struktur JSX di mana AuthProvider membungkus ThemeProvider untuk memisahkan konteks state (auth state dan theme state) agar pembaruan bisa dikelola secara terpisah.
Preview