SİBERSALDİRİ.COM · KONU ODAKLI DERS
Bu derste kazanacaklarınız
- Durum ile Render arasındaki ilişkiyi açıklamak.
- “Türetilmiş değer neden her zaman state olmamalıdır?” sorusuna gerekçeli yanıt vermek.
- Örneği değiştirip beklenen ve gözlenen davranışı karşılaştırmak.
Çalışma mantığı ve güven sınırı
useState güncellemesinde önceki değere bağlı işlem için fonksiyon biçimini kullanın. Hook'ları koşul veya döngü içinde çağırmayın. useEffect dış sistemle eşitleme ihtiyacı için düşünülmelidir; her türetilmiş değer için effect yazmak gereksiz durum üretir. Abonelik ve zamanlayıcı temizliğini unutmayın; geliştirme davranışını üretim garantisi sanmayın.
Açıklamalı örnek
Aşağıdaki parça kavramı görünür kılar. Komut veya kod içeren örnekleri üretim sisteminde değil, size ait ayrı deneme ortamında değerlendirin. Mimari şema ve politika örnekleri çalıştırılabilir program değildir.
const [count, setCount] = useState(0);
<button onClick={() => setCount(c => c + 1)}>
{count}
</button>Beklenen sonuç ve yorumu
Her tıklama önceki durumdan bir sonraki değeri üretir.
Karşılaştırmalı durumlar
| Durum | Beklenen yaklaşım | Neden? |
|---|---|---|
| Önceki değere bağlı güncelleme | Fonksiyon biçimi | Son geçerli değer kullanılır |
| Türetilmiş değer | Hesapla | Gereksiz state tutarsızlık yaratır |
| Abonelik var | Temizleme ekle | Ömür bitince kaynak bırakılır |
Uygulama görevi
İki güncellemenin aynı olayda yapılması durumunda doğrudan değerle fonksiyon güncellemesini karşılaştırın.
- İşlemden önce beklenen sonucu ve kabul koşulunu yazın.
- Tek bir değişkeni değiştirin; gözlemi ve kullandığınız ortamı kaydedin.
- Sonucu yukarıdaki karşılaştırma tablosuyla değerlendirin. Uymayan durumda hangi varsayımın yanlış olabileceğini açıklayın.
Sık yapılan hata ve düzeltme yönü
Effect bağımlılıklarını uyarıyı susturmak için gelişigüzel silmeyin.
Kendinizi sınayın
Türetilmiş değer neden her zaman state olmamalıdır?
Açıklamalı yanıt: Mevcut veriden hesaplanabiliyorsa ayrı state tutmak senkronizasyon ve tutarsızlık riski ekler.
İlgili derslerle ilerleyin
- Next.js: Sunucu ve istemci sorumluluklarını ayırma
- React: Bileşen, veri akışı ve güvenli gösterim
- Material UI: Bileşenden erişilebilir akışa
- Redux Toolkit: Ortak durumun kapsamını seçme
Teknik başvuru
Bu dersin anlatımı ve örnekleri akademi için yeniden hazırlanmıştır. Aşağıdaki bağlantı, kullanılan teknoloji veya güvenlik yaklaşımının ayrıntılarını doğrulamak için teknik başvurudur.
