Context ayrımı
- React kursu
- Orta seviye
- Ders 9/80
- 4 dk
Birden çok context'i ayırarak performansı korumayı öğrenirsin.
Context ayrımı
Büyük bir context, her küçük değişimde tüm tüketicileri yeniden çizer. Bu performans sorunu yaratır. Çözüm: bağlamı birden çok küçük context'e bölmek.
Örneğin bir kullanıcı bağlamında user ve setUser ayrı context'lerde tutulur. user sık değişir, setUser ise hiç değişmez. Sadece setUser'ı kullanan bileşenler gereksiz çizimden kurtulur.
Bu desen state ve setter ayrımı olarak bilinir. React'in resmî dokümanlarında da önerilir; özellikle büyük uygulamalarda ciddi hız artışı sağlar.
İki context örneği
Bir UserStateContext ve bir UserSetContext tanımla. Provider ikisini de sarmalar; user ve setUser'ı ayrı value'lar olarak verir.
Okuma tarafında yalnızca setUser gereken bileşenler useContext(UserSetContext) kullanır; user değişse bile bunlar çizilmez. Yalnızca user gerekenler ise UserStateContext okur.
Bu sayede her bileşen yalnızca ihtiyacı olan değeri dinler. React'in çizim ağacı daha verimli çalışır. Bu yaklaşım büyük listelerde ve formlarda fark yaratır.
Uygulama İki context tanımla
Aşağıdaki iskeleti tamamla. UserStateContext ve UserSetContext adında iki context oluştur; ikisi de null varsayılanla. İkisini de dışa aktar.
Başlangıç kodu
import { createContext } from "react";
// İki context'i buraya tanımlaÖrnek çözüm
import { createContext } from "react";
const UserStateContext = createContext(null);
const UserSetContext = createContext(null);
export { UserStateContext, UserSetContext };Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Neden context'i bölmeli?
- Daha az kod yazmak için
- Performans için Doğru cevap
- useEffect'i atlamak için
- CSS'i değiştirmek için
Açıklama: Context bölme performans için yapılır.
2 Ayrım deseni
Sık değişen ____ ve hiç değişmeyen setter ayrı context'lerde tutulur.Sık değişen state ve hiç değişmeyen setter ayrı context'lerde tutulur.Açıklama: state ve setter ayrı tutulur.
3 Context ayrımını eşleştir
| Kavram | Anlamı |
|---|---|
UserStateContext |
user |
UserSetContext |
setUser |
Provider |
Sarar |
useContext |
Okur |