Senior Frontend mülakat soruları ve cevapları: React ve Next.js
Senior Frontend mülakat soruları ve cevapları: React ve Next.js
Senior frontend görüşmesinde iyi cevap, bir API adını söylemek değildir. Kararın bağlamını, maliyetini ve nasıl ölçüleceğini açıklamaktır. Aşağıdaki sorular, bunu göstermek için tasarlandı.
1. useEffect ne zaman yanlış araçtır?
Güçlü cevap: Effect, React bileşenini ağ bağlantısı, browser API'si veya üçüncü taraf widget gibi harici bir sistemle senkronlamak içindir. Bir prop'tan türetilen state'i useEffect içinde yeniden hesaplamak çoğu zaman fazladan render, yarış koşulu ve bağımlılık hatası üretir. Türetilmiş değer render sırasında hesaplanabilir; kullanıcı olayı ise event handler'da işlenmelidir.
Ardından istisnayı eklerim: pahalı hesaplama için ölçerek useMemo, sunucu verisi için ise cache/invalidation semantiği olan bir veri katmanı gerekir. “Her şeyi Effect'e koyarım” yaklaşımı senior seviye değildir.
2. Büyük bir React ekranının yavaş olduğunu nasıl teşhis edersiniz?
Önce hissi metriğe çeviririm: ilk yüklemede LCP mi, etkileşimde INP mi, yoksa liste scroll'unda render maliyeti mi sorun? React Profiler ve browser performans kaydıyla render eden bileşenleri, bundle analiziyle indirilen JavaScript'i, network paneliyle de bekleyen istekleri ayırırım.
Çözüm, bulguya göre değişir: uzun liste için sanallaştırma; büyük client component için sınırı küçültmek; yinelenen API çağrısı için cache; hero görseli için ölçülü next/image. Önce memo eklemek değil, darboğazı görmek gerekir.
3. Server Component ve Client Component sınırını nasıl çizersiniz?
Varsayılanım Server Component'tir. Veriyi sunucuda okuyup HTML/RSC üretirim. Durum, event handler, browser API'si veya interaktif kütüphane gerektiğinde en küçük mümkün parçayı Client Component yaparım.
Bu sınır bir performans tercihi olmanın yanında güvenlik sınırıdır: server-only sırlar ve veri erişim kodu client bundle'a girmez. Büyük bir sayfanın tepesine use client koymak, bütün alt ağacı istemciye taşıyabilir.
4. State'i nerede tutarsınız?
State'i üçe ayırırım: URL'de paylaşılabilir filtre/sıralama state'i, sunucudan gelen ve cache politikası olan server state, yalnızca bir bileşeni ilgilendiren local UI state. Global store'u ancak gerçekten birbirinden uzak birçok bileşen aynı değişkeni koordine ediyorsa kullanırım.
Bu ayrım, “state yönetim kütüphanesi seçimi”nden daha değerlidir. Yanlış konumlanan state, en iyi kütüphaneyle bile karmaşıklaşır.
5. Erişilebilirliği teslim kriteri yapar mısınız?
Evet. Klavye ile gezinme, görünür focus, semantik HTML, form hata ilişkilendirmesi, kontrast ve modal focus yönetimi kod incelemesinin parçasıdır. div ile yapılan buton, klavyede çalışmıyorsa kullanıcı arayüzü bitmemiştir. Otomatik denetim temel hataları yakalar; gerçek klavye akışı ve ekran okuyucu denemesi kritik etkileşimlerde ayrıca gerekir.
Bu disiplin, Next.js performans optimizasyonu rehberindeki kullanıcı deneyimi yaklaşımını tamamlar: hızlı ama kullanılamayan arayüz başarılı değildir.