Ek bilgiler
Context API ile State Yönetimi ve App Bileşeninin Sadeleştirilmesi
Önceki projelerimizde App.jsx üzerinde biriken user state'i, localStorage senkronizasyonu ve handleLogin / handleLogout gibi metotlar, prop drilling sebebiyle bileşen ağacında gereksiz bir kalabalık ve bağımlılık yaratıyordu. Bu durum özellikle router ve alt sayfalara veri taşırken kodu yönetmeyi fazlasıyla zorlaştırıyordu. Bu bölümde, tüm bu kullanıcı yönetim mekanizmasını merkezi bir yapıya taşımak için SiteContext ve SiteContextProvider ikilisini hayata geçirdik. Böylece kimlik doğrulama süreçlerini tek bir çatı altında topladık.
Provider kurgusunda createContext ile context tanımını yapıp, value prop'u aracılığıyla user, handleLogin ve handleLogout değerlerini alt bileşenlere sunduk. Süreç esnasında karşılaştığımız en kritik detay, context içerisinde sayfa yönlendirmesi sağlayan useNavigate kancasının mutlaka BrowserRouter sarmalaması içinde çalışması gerektiğiydi. SiteContextProvider'ı BrowserRouter'ın altına taşıyarak bu yönlendirme hatasını çözdük ve useContext(SiteContext) sayesinde ilgili verilere ihtiyaç duyan her noktadan doğrudan eriştik.
Günün sonunda App bileşeninin gereksiz state ve handler kalabalığından tamamen arınarak tertemiz bir yapıya kavuştuğunu gördük. Merkezi bir context mimarisi kurduğunuzda, SiteRoutes gibi ara köprülerde tek tek prop taşımak zorunda kalmazsınız. Şimdi kod tabanımız çok daha sürdürülebilir ve okunabilir bir temele oturdu; bir sonraki aşamada ise aralara dağılmış eski prop geçişlerini tek tek ayıklayıp temizliği tamamlayacağız.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Prop Drilling Temizliği: Kimlik doğrulama ve kullanıcı durumu gibi genel state'leri context mimarisine taşımak, ara bileşenlerin üzerinden gereksiz prop aktarım yükünü tamamen alır.
- Router Kapsam Hiyerarşisi:
useNavigate gibi react-router kancalarını context içerisinde tüketiyorsanız, context sağlayıcınızın (SiteContextProvider) mutlaka BrowserRouter bileşeni içerisinde yer alması gerekir.
- Merkezi Provider Mantığı:
SiteContextProvider, state ve metotları sarmaladığı children yapısına aktararak uygulamanın tek elden yönetilebilir bir veri kaynağına kavuşmasını sağlar.
- useContext ile Seçici Tüketim: Alt bileşenlerde yalnızca gereken verileri (
user, handleLogin, handleLogout) nesne parçalama (destructuring) ile tüketmek kodun okunabilirliğini artırır.
- Sadeleşen Ana Bileşen: Başarılı bir context soyutlamasının en somut göstergesi,
App bileşeninin karmaşık iş mantığından arınıp saf bir orkestrasyon katmanına dönüşmesidir.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)