Context ayrımı

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.

Örnek çözümü göster

import { createContext } from "react";

const UserStateContext = createContext(null);
const UserSetContext = createContext(null);

export { UserStateContext, UserSetContext };

Kendini test et

Neden context'i bölmeli?
- Daha az kod yazmak için
- Performans için
- useEffect'i atlamak için
- CSS'i değiştirmek için
Cevabı göster

Performans için — Context bölme performans için yapılır.

Ayrım deseni

Sık değişen ____ ve hiç değişmeyen setter ayrı context'lerde tutulur.

Cevabı göster

Sık değişen state ve hiç değişmeyen setter ayrı context'lerde tutulur.

Context ayrımını eşleştir

UserStateContext

user
UserSetContext

setUser
Provider

Sarar
useContext

Okur

Sıradaki ders: Context + useReducer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler