Genel ve Yerel Durum Ne Zaman Kullanılır
Birlikte konumlandırma ilkesini uygulayın: durumu mümkün olduğunca tüketicisine yakın tutun ve yalnızca birden çok ilgisiz bileşenin ihtiyacı olduğunda yukarı taşıyın.
Genel ve Yerel Durum Ne Zaman Kullanılır, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.
Durumun Konumunu Belirleme
Her durum parçasının en uygun bir yeri vardır. Yanlış konumu seçmek, ya özellikleri bileşenler arasında zincirleme aktarma sorunlarına ya da gereksiz bir global durum karmaşıklığına yol açar. Temel ilke şudur: durumu, onu kullanan bileşenlere mümkün olduğunca yakın tutun.
Yerel Bileşen Durumu
Durumu yalnızca bir bileşen kullanıyorsa, bu durum o bileşenin useState/ref yapısında bulunmalıdır. Paylaşım gerekmiyorsa yerel tutun. Bu, en basit ve en yaygın durumdur.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Durumu Üst Seviyeye Taşıma
İki kardeş bileşenin aynı duruma ihtiyaç duyduğu zaman, durumu bu bileşenlerin en yakın ortak atasına taşıyın. Durumu özellikler ve geri çağırmalar olarak alt bileşenlere aktarın. Global bir depoya başvurmadan önce bu, React/Vue'da kullanılan standart yaklaşımdır.
Paylaşılan Bağlam — Orta Düzey Paylaşım
Durumun özellikleri bileşenler arasında zincirleme aktarmadan bir alt ağaçta paylaşılması gerektiğinde Context (React) veya provide/inject (Vue) doğru araçtır. Bu yaklaşım, orta kapsamlı paylaşımlar (bir sayfa veya özellik modülü) içindir.
Global Depo — Uygulama Genelindeki Durum
Şu özelliklere sahip durumlar için global bir depo (Redux, Zustand, Pinia) kullanın: 1) birbiriyle ilişkili olmayan birçok bileşen tarafından erişilmesi, 2) gezinmeler arasında korunması, 3) karmaşık güncelleme mantığına sahip olması, 4) DevTools ile incelenmekten yararlanması.
Örnekler: Yerel Durum
Yerel durum şu durumlar için uygundur: form alanı değerleri, araç ipucunun açık/kapalı durumu, iletişim kutusunun görünürlüğü, üzerine gelme durumu, animasyon durumu ve tek bir bileşene özgü yükleme göstergeleri.
Örnekler: Üst Seviyeye Taşınan Durum
Üst seviyeye taşınan durum şu durumlar için uygundur: iki kardeş listenin kullandığı ortak bir filtre, sekme grubunda seçili sekme ve iki adım arasında paylaşılan form verileri.
Örnekler: Bağlam / Sağlama
Context şu durumlar için uygundur: geçerli tema, kimliği doğrulanmış kullanıcı, yerel ayar/dil, özellik bayrakları ve bildirim yığını — birçok derinlikte kullanılan ancak seyrek güncellenen şeyler.
Örnekler: Global Depo
Global depo şu durumlar için uygundur: alışveriş sepeti, kimlik doğrulama belirteçleri ve kullanıcı nesnesi, bildirim kuyruğu (mesajlar her yerden bir bildirim balonunda görünür) ve birden çok görünümün aynı anda gösterdiği gerçek zamanlı veriler.
Sunucu Durumu ve İstemci Durumu
Ağ verileri (bir API'den alınan veriler) özel bir kategori olan sunucu durumuna girer. Bu veriler için yükleme/hata yönetimi, önbelleğe alma ve geçersiz kılma gerekir. React Query / SWR / TanStack Query sunucu durumunu yönetir; böylece deponuz gerçek istemci durumuna odaklanabilir.
Yaygın Hata: Her Şeyi Global Depoya Koymak
Her durumu “ne olur ne olmaz” diye global depoya koymayın. Yerel durum daha az kaynak kullanır, daha basittir ve test edilmesi daha kolaydır. Global durumu gereğinden fazla kullanmak, bağımsız olması gereken bileşenler arasında bağımlılık oluşturur.
Karar Çerçevesi
Şunları sorun: 1) Başka bileşenlerin buna ihtiyacı var mı? Hayır → yerel. 2) Yakın kardeş bileşenlerin buna ihtiyacı var mı? Evet → üst seviyeye taşıyın. 3) Bir bileşen alt ağacının buna ihtiyacı var mı? Evet → bağlam/sağlama. 4) Birbiriyle ilişkili olmayan birçok bileşenin buna ihtiyacı var mı veya DevTools gerekiyor mu? Evet → global depo.
Hızlı Kontrol
Tek bir akordeon bileşeninin açık/kapalı durumunu nerede saklamalısınız?
Özet: Durumun Konumu
İlke: durumu, onu kullanan bileşenlere mümkün olduğunca yakın tutun. Tek bileşene ait durum için yerel useState/ref kullanın. Kardeş bileşenlerin paylaşımı için durumu üst seviyeye taşıyın. Alt ağaç paylaşımı için bağlam/sağlama kullanın. Karmaşık güncellemelere sahip uygulama genelindeki durum için global depo kullanın. Sunucu durumu (API verileri) global depoya değil, React Query/SWR'a aittir.
Sıkça Sorulan Sorular
“Genel ve Yerel Durum Ne Zaman Kullanılır” dersi ücretsiz mi?
Evet — “Genel ve Yerel Durum Ne Zaman Kullanılır” 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 ve Yerel Durum Ne Zaman Kullanılır” dersinde ne öğreneceğim?
Birlikte konumlandırma ilkesini uygulayın: durumu mümkün olduğunca tüketicisine yakın tutun ve yalnızca birden çok ilgisiz bileşenin ihtiyacı olduğunda yukarı taşıyın. 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 4. dersidir.
“Genel ve Yerel Durum Ne Zaman Kullanılır” 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
- Redux Toolkit: createSlice ve configureStore
- Hafif React Durumu için Zustand
- Vue için Pinia: defineStore ve storeToRefs
- Genel ve Yerel Durum Ne Zaman Kullanılır