0Pricing
React Academy · Ders

Doğru State Konumunu Seçme

Yerel state, yukarı taşınmış state veya genel state arasında seçim yapmak için bir karar çerçevesi uygulayın.

Doğru State Konumunu Seçme, CoddyKit'te ücretsiz bir React 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste durumun tek bir bileşende mi, ortak bir atada mı, React Context'te mi yoksa genel bir durum kütüphanesinde mi bulunması gerektiğine karar vermek için pratik bir karar çerçevesi öğreneceksiniz.

1. Adım: Bu Durumu Kim Kullanıyor?

Önce şunu sorun: Bu durumu kullanarak hangi bileşenler oluşturuluyor? Bunları listeleyin. Yalnızca bir bileşen kullanıyorsa durumu o bileşende yerel tutun.

Yerel Durum

Tam olarak bir bileşen tarafından kullanılan durum, useState ile o bileşende bulunur. Örnekler: bir açılır listenin açık olup olmadığı, denetlenen bir girdinin mevcut değeri ve bir ipucunun görünür olup olmadığı.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

2. Adım: Ortak Atayı Bulma

Birden fazla bileşenin duruma ihtiyacı varsa bileşen ağacındaki en yakın ortak atalarını bulun. Durumu oraya taşıyın ve prop olarak aşağı aktarın.

Yukarı Taşınmış Durum (2–3 Düzey)

Aynı iç içe geçme düzeyindeki 2–3 bileşen arasında paylaşılan durum, yukarı taşımak için iyi bir adaydır. Ortak üst bileşen duruma sahip olur ve onu prop'lar aracılığıyla aşağı aktarır.

3. Adım: Prop Aktarımı Fazla Derin mi?

Ortak ata, tüketicilerin 4 veya daha fazla düzey üzerindeyse prop'ları ara bileşenlerden geçirmek gereksiz gürültü oluşturur. Context kullanmayı değerlendirin.

Context Durumu

Ağaç genelinde birçok bileşenin ihtiyaç duyduğu yatay konuları Context ile yönetin: mevcut kimliği doğrulanmış kullanıcı, etkin tema ve seçili yerel ayar. Bunlar nadiren değişir ve çok sayıda tüketiciye sahiptir.

4. Adım: Durum Karmaşık mı veya Sayfalar Arasında mı Paylaşılıyor?

Durumun karmaşık güncelleme mantığı varsa, geri alma/yineleme gerekiyorsa, gezinme boyunca korunması gerekiyorsa veya tamamen ayrı bileşen ağaçlarında kullanılıyorsa özel bir durum kütüphanesi (Zustand, Redux) kullanın.

Sunucu Durumu Farklıdır

Bir sunucudan alınan veri, kullanıcı arayüzü durumu değil, *sunucu durumudur*. Bunu useState'te veya genel bir depoda saklamayın; önbelleğe alma, yeniden getirme ve hata durumlarını otomatik olarak yöneten React Query, SWR veya RTK Query kullanın.

Karar Akış Şeması

1 tüketici → yerel useState. Benzer derinlikte 2–3 tüketici → üst bileşene taşıyın. 4 veya daha fazla düzeylik aktarım → Context. Karmaşık mantık veya ağaçlar arası paylaşım → Zustand/Redux. Sunucu verisi → React Query/SWR.

Hızlı Kontrol

Büyük bir uygulamadaki birçok bileşenin erişmesi gereken mevcut kimliği doğrulanmış kullanıcı için hangi durum konumu en uygundur?

Özet

Durum konumunu tüketicilere göre seçin: tek tüketici için yerel, yakındaki birkaç tüketici için yukarı taşınmış, farklı düzeylerdeki birçok tüketici için Context, karmaşık veya ağaçlar arası durum için durum kütüphanesi, sunucu verisi için React Query.

Kurs Tamamlandı

Tebrikler! **Durumu Yukarı Taşıma ve Prop Aktarımı Çözümleri** kursunu tamamladınız. Artık durumun nerede bulunacağına ve nasıl doğru biçimde paylaşılacağına karar vermek için net bir çerçeveniz var.

Sıkça Sorulan Sorular

“Doğru State Konumunu Seçme” dersi ücretsiz mi?

Evet — “Doğru State Konumunu Seçme” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Doğru State Konumunu Seçme” dersinde ne öğreneceğim?

Yerel state, yukarı taşınmış state veya genel state arasında seçim yapmak için bir karar çerçevesi uygulayın. React 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.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React 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.

“Doğru State Konumunu Seçme” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

  1. State'i Yukarı Taşıma: İlkeler ve Örnekler
  2. Prop Drilling: Ne Zaman Sorun Olur, Ne Zaman Olmaz
  3. Kardeş Bileşenler Arası İletişim Düzenleri
  4. Doğru State Konumunu Seçme
← React Academy Sayfasına Dön