Genel Durum için useContext
Bir Context oluşturun, bir alt ağacı Provider'ı ile sarın ve prop aktarmaya gerek kalmadan tema veya kimlik doğrulama durumunu paylaşmak için değeri useContext ile tüketin.
Genel Durum için useContext, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Özellikleri zincirleme aktarmanın sorunu
Özellikleri zincirleme aktarma, veriyi kullanmayan birçok aracı bileşenden geçirerek yalnızca derinlerdeki bir alt bileşene ulaştırmak demektir. Context, bir değeri açıkça aktarmadan ağaçtaki herhangi bir bileşenin kullanımına sunarak bu sorunu çözer.
Bağlam oluşturma
createContext(defaultValue) bir Context nesnesi oluşturur. Varsayılan değer, bir bileşen üzerinde eşleşen bir Provider olmadığında bileşenin bağlamı okuması sırasında kullanılır.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Bağlamı sağlama
Bağlama ihtiyaç duyan ağaç bölümünü Provider ile sarın. İçindeki tüm bileşenler bağlam değerini okuyabilir.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>useContext ile Tüketme
Provider içindeki herhangi bir bileşen, bağlam değerine useContext(ThemeContext) ile erişebilir. Herhangi bir şeyi özellik olarak aktarmanız gerekmez.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}useContext Kullanarak Özel Kanca
Dahili olarak useContext işlevini çağıran özel bir kanca dışa aktarın. Bu, bağlamı doğrudan sunmaktan daha temizdir ve doğrulama eklemenize olanak tanır.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Bağlamın Yeniden Oluşturulması
Sağlayıcının değeri değiştiğinde tüm tüketiciler yeniden oluşturulur. Değer bir nesneyse her oluşturma sırasında yeni bir nesne başvurusu oluşturulması, tüm tüketicilerin yeniden oluşturulmasına neden olur. Bunu önlemek için değeri useMemo ile önbelleğe alın.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Bağlam Ne Zaman Kullanılmalı
Şunlar için uygundur: tema, yerel ayar, kimliği doğrulanmış kullanıcı, özellik bayrakları, bildirim sistemi. Şunlar için ideal değildir: yüksek sıklıklı güncellemeler (her tuş vuruşu), büyük ve karmaşık durumlar (bunun yerine bir durum deposu kullanın).
Birden Çok Bağlam
Birbirinden bağımsız birden çok bağlama sahip olabilirsiniz. Bağlamları odaklı tutun — kimlik doğrulama için bir AuthContext, tema için bir ThemeContext kullanın. Her şeyi barındıran tek bir dev bağlamdan kaçının.
Bağlam ve Redux Karşılaştırması
Bağlam yerleşiktir ve seyrek değişen genel veriler için yeterlidir. Redux/Zustand/Pinia; çok sayıda güncelleme, zaman içinde ilerleyerek hata ayıklama veya ara yazılım gereksinimleri bulunan karmaşık durumlar için daha uygundur.
Kimlik Doğrulama Bağlamı Deseni
Yaygın bir desen şudur: geçerli kullanıcıyı ve kimlik doğrulama yöntemlerini barındıran bir AuthContext. Tüketen bileşenler, özellikleri zincirleme aktarmaya gerek kalmadan kullanıcıya erişir.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Bağlam ve TypeScript
Bağlamı bir interface ile türlendirin. Başlangıç değeri olarak null kullanın ve null ise özel kancada hata fırlatın. Bu, “sağlayıcının dışında tüketilme” gibi imkânsız bir durumun sessizce oluşmasını önler.
Performans: memo + Bağlam
React.memo ile sarılmış bileşenler, özellikleri değişmediği sürece yeniden oluşturulmaz. Bir bağlam tüketicisinin çıktısı bağlamın yalnızca bir bölümüne bağlıysa gereksiz yeniden oluşturmayı önlemek için bağlamı bölün veya seçici desenleri kullanın.
Kısa Kontrol
Üstünde hiçbir Provider bulunmayan bir bileşenin içinde çağrıldığında useContext(MyContext) ne döndürür?
Özet: useContext
createContext, varsayılan bir değerle bağlam oluşturur. Bir değer sağlamak için ağacı sağlayıcıyla sarın. useContext, içerideki herhangi bir yerde değeri okur. Özel kancalar, doğrulama amacıyla useContext'i sarar. Gereksiz yeniden oluşturmayı önlemek için sağlayıcı değerini önbelleğe alın. Tema ve kimlik doğrulama gibi seyrek değişen genel veriler için kullanın.
Sıkça Sorulan Sorular
“Genel Durum için useContext” dersi ücretsiz mi?
Evet — “Genel Durum için useContext” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Genel Durum için useContext” dersinde ne öğreneceğim?
Bir Context oluşturun, bir alt ağacı Provider'ı ile sarın ve prop aktarmaya gerek kalmadan tema veya kimlik doğrulama durumunu paylaşmak için değeri useContext ile tüketin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Genel Durum için useContext” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Genel Durum için useContext
- Karmaşık Durum için useReducer
- Performans için useMemo ve useCallback
- Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma