Context API
React’te Context API, bileşenler arasında veri paylaşımını prop drilling (özellikle derin bileşen ağaçlarında veri iletimi) kullanmadan yönetmek için geliştirilmiş güçlü bir yapıdır. Modern web uygulamalarında ve SPA (Tek Sayfa Uygulamaları) mimarisinde, bileşenler arasındaki veri akışı giderek karmaşıklaşabilir ve props ile sürekli veri iletmek hem okunabilirliği düşürür hem de gereksiz yeniden renderlara yol açabilir. Context API, bu sorunları çözerek global veya ortak veri durumlarını merkezi bir yerde yönetmeyi sağlar.
Context API’nin en kritik kullanım alanları arasında kullanıcı bilgileri, tema ayarları, dil seçenekleri ve oturum yönetimi gibi uygulama genelinde paylaşılan veriler bulunur. Bu sayede, bir bileşenin ihtiyaç duyduğu verilere doğrudan erişebilmesi sağlanır, ve uygulama yapısı daha modüler ve sürdürülebilir hale gelir. Context API kullanırken React’in temel kavramlarını bilmek önemlidir: bileşenler, state yönetimi, veri akışı ve yaşam döngüsü metotları. Bu konuların anlaşılması, Context API’nin performanslı ve hatasız uygulanabilmesi için gereklidir.
Bu içerikte okuyucu, Context API kullanarak prop drilling’i önlemeyi, global state yönetimi yapmayı ve modern React uygulamalarında veri akışını optimize etmeyi öğrenecek. Ayrıca, Context oluşturma, provider ve consumer kullanımı, useContext Hook’u ile context erişimi ve performans optimizasyonları detaylı olarak ele alınacaktır. Öğrenilen bilgiler, bileşen bazlı düşünme yaklaşımı ile birleşerek, yeniden kullanılabilir ve sürdürülebilir React bileşenleri geliştirmeyi mümkün kılacaktır.
Temel Örnek
jsximport React, { createContext, useState, useContext } from 'react';
// 1. Context oluşturma
const ThemeContext = createContext();
// 2. Context Provider bileşeni
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
// 3. Context tüketimi için özel Hook
const useTheme = () => useContext(ThemeContext);
// 4. Tema değiştiren bileşen
const ThemeToggler = () => {
const { theme, toggleTheme } = useTheme();
return ( <button onClick={toggleTheme}>
Mevcut Tema: {theme} </button>
);
};
// 5. Ana uygulama bileşeni
const App = () => {
return ( <ThemeProvider> <div> <h1>React Context API Örneği</h1> <ThemeToggler /> </div> </ThemeProvider>
);
};
export default App;Yukarıdaki örnek, Context API’nin temel kullanımını gösteren eksiksiz bir React uygulamasıdır. Öncelikle, createContext ile bir ThemeContext oluşturduk; bu, uygulama genelinde paylaşılacak veri ve fonksiyonları saklayacak. ThemeProvider bileşeni, useState ile tema durumunu yönetir ve toggleTheme fonksiyonu ile kullanıcıya tema değiştirme yeteneği sunar. Provider bileşeni value prop’u aracılığıyla context değerlerini alt bileşenlere sağlar.
useTheme adlı özel hook, useContext kullanarak context verilerine erişimi kolaylaştırır ve tüketici bileşenlerde tekrar eden kodları önler. ThemeToggler bileşeni, context verisini çekerek kullanıcıya mevcut temayı gösterir ve buton aracılığıyla temayı değiştirmeye izin verir. Bu yapı, prop drilling’i önler ve alt bileşenler arasında state paylaşımını merkezileştirir.
Bu örnek aynı zamanda React’in temel kavramlarını gösterir: bileşen tabanlı yapı, state yönetimi ve veri akışı. Uygulama lifecycle açısından, useState ile state değiştikçe ilgili bileşenler yeniden render olur, ancak yalnızca context verilerini kullanan bileşenler etkilenir. Bu, gereksiz renderları önlemeye yardımcı olur. Ayrıca, Context API ile global state yönetimi, özellikle kullanıcı deneyimini optimize eden SPA projelerinde kritik bir rol oynar.
Pratik Örnek
jsximport React, { createContext, useState, useContext, useEffect } from 'react';
// Kullanıcı verileri için Context oluşturma
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
// Simülasyon amaçlı veri çekme
useEffect(() => {
const fetchUser = async () => {
try {
const response = await fetch('[https://jsonplaceholder.typicode.com/users/1](https://jsonplaceholder.typicode.com/users/1)');
const data = await response.json();
setUser(data);
} catch (error) {
console.error('Kullanıcı verisi alınamadı', error);
} finally {
setLoading(false);
}
};
fetchUser();
}, []);
return (
<UserContext.Provider value={{ user, loading }}>
{children}
</UserContext.Provider>
);
};
const useUser = () => useContext(UserContext);
const UserProfile = () => {
const { user, loading } = useUser();
if (loading) return <p>Yükleniyor...</p>;
if (!user) return <p>Kullanıcı bulunamadı.</p>;
return ( <div> <h2>{user.name}</h2> <p>Email: {user.email}</p> <p>Şehir: {user.address.city}</p> </div>
);
};
const App = () => {
return ( <UserProvider> <div> <h1>React Context API Gerçek Dünya Örneği</h1> <UserProfile /> </div> </UserProvider>
);
};
export default App;Bu ileri düzey örnek, Context API’nin gerçek dünya kullanımına dair kapsamlı bir örnek sunar. UserContext, kullanıcı verilerini uygulama genelinde paylaşmak için oluşturulmuştur. UserProvider bileşeni, useState ve useEffect kullanarak asenkron veri çekme ve state yönetimi sağlar. useEffect, bileşen mount edildiğinde API çağrısı yaparak veri getirir; hata yönetimi ve loading state’i ile kullanıcı deneyimi optimize edilir.
UserProfile bileşeni, context üzerinden kullanıcı bilgilerini çeker ve conditional rendering ile yüklenme durumunu veya veri bulunamama durumunu ele alır. Bu yapı, modern SPA projelerinde veri akışını düzenler ve prop drilling sorununu tamamen ortadan kaldırır. Context API’nin kullanımı, performans açısından önemlidir; yalnızca context tüketen bileşenler güncellenir ve gereksiz renderlar engellenir.
Best practices açısından, Context API kullanırken her zaman küçük, modüler contextler oluşturmak, state mutations’ı doğrudan yapmamak ve asenkron veri işlemlerinde hata yönetimi sağlamak kritik önemdedir. Bu örnek, profesyonel React projelerinde global state yönetimi, veri akışı kontrolü ve lifecycle yönetimi konularında güçlü bir temel sağlar.
React Context API kullanırken bazı temel best practices ve yaygın hatalara dikkat edilmelidir. Öncelikle, küçük ve modüler contextler oluşturmak, uygulama performansını artırır. Tek bir büyük context yerine işlevsel gruplar oluşturmak (ör. tema, kullanıcı, dil) gereksiz yeniden renderları önler. State değişikliklerinde doğrudan mutasyon yerine setState fonksiyonları kullanılmalıdır; bu, React’in reactivity modelini korur.
Prop drilling’den kaçınmak Context API’nin en büyük avantajıdır, ancak context’in yanlış veya aşırı kullanımı gereksiz renderlara yol açabilir. Bu nedenle context’i yalnızca gerçekten global veya paylaşılan veri için kullanmak gerekir. useContext ile context tüketiminde conditional rendering ve error boundaries eklemek, uygulama güvenilirliğini artırır.
Performans optimizasyonları için memoization (React.memo, useMemo) ve context değerlerini immutable yapılarla yönetmek önemlidir. Ayrıca, async veri çekiminde loading ve error state’lerinin yönetilmesi kullanıcı deneyimini iyileştirir. Güvenlik açısından, context içinde hassas veriler varsa (örn. token veya kullanıcı bilgileri) erişim kontrolleri ve şifreleme yöntemleri kullanılmalıdır.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| createContext | Yeni bir context oluşturur | const MyContext = createContext(); |
| Provider | Context değerlerini alt bileşenlere sağlar | <MyContext.Provider value={...}>{children}</MyContext.Provider> |
| useContext | Context değerlerini tüketmek için Hook | const value = useContext(MyContext); |
| State Management | Context ile global state yönetimi yapılabilir | useState + Context ile veri paylaşımı |
| useEffect | Context içinde veri çekme ve lifecycle yönetimi | useEffect(() => { fetchData(); }, []); |
Özetle, React Context API modern web uygulamalarında ve SPA’larda global state yönetimini basitleştirir, prop drilling’i ortadan kaldırır ve bileşen tabanlı geliştirmeyi optimize eder. Öğrenciler, Context API ile bir uygulamadaki global verileri yönetmeyi, performans optimizasyonlarını ve lifecycle yönetimini öğrenir. Bir sonraki adımda, Redux veya Zustand gibi daha kapsamlı state yönetim kütüphanelerini inceleyerek Context API ile nasıl entegre edilebileceğini görmek faydalı olur. Context API’yi uygulamalı projelerde kullanmak, bileşenlerin yeniden kullanılabilirliğini artırır ve sürdürülebilir React uygulamaları geliştirmeyi sağlar.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek