Örnek sorular
Rn Performance RenderingZorluk 1
React Native'de uzun bir diziyi ScrollView + .map() ile render etmek yerine genellikle FlatList tercih edilmesinin sebebi nedir?
- aFlatList tüm render işini native UI thread'e taşır, JS hiç devreye girmez.
- bFlatList tüm öğeleri baştan render eder ama ekran görüntülerini daha hızlı scroll için cache'ler.
- cScrollView, framework'ün sabit bir sınırı nedeniyle 50'den fazla öğe render edemez.
- dFlatList render’i virtualize eder, sadece viewport’a yakın ögeleri mount eder.✓
Açıklama:FlatList virtualized'dır: sadece görünür alana yakın öğeleri mount eder, ekran dışındakileri geri dönüştürür/unmount eder; bu da ScrollView'in aksine (ki her şeyi hemen mount eder) uzun listelerde bellek ve ilk render maliyetini düşük tutar.
Rn Performance RenderingZorluk 1
FlatList üzerindeki keyExtractor prop'unun temel amacı nedir?
- aHer liste öğesinin üstünde gösterilen görsel etiketi/anahtarı belirler.
- bHer öge için doğru takip sağlayan kararlı, benzersiz bir kimlik.✓
- cHangi öğelerin kaydırılarak silinebileceğini tanımlar.
- dListe verisini ağ üzerinden göndermeden önce şifreler.
Açıklama:keyExtractor, her öğe için kararlı ve benzersiz bir string döner; React bunu, array index'ine güvenmek yerine öğeleri re-render/yeniden sıralama arasında tanımlamak için kullanır, yanlış state yeniden kullanımını ve gereksiz remount'ları önler.
Rn Performance RenderingZorluk 1
Tüm satırların sabit ve bilinen bir yüksekliği olduğunda FlatList'e getItemLayout vermenin faydası nedir?
- aVirtualization'ı devre dışı bırakır, böylece daha pürüzsüz görünmesi için liste tek seferde render edilir.
- bFlatList’in ögeleri ölçmesini atlayıp doğrudan herhangi bir scroll offset’ine atlamasını sağlar.✓
- cListeye otomatik olarak pull-to-refresh desteği ekler.
- dPiksel-mükemmel hizalama için her satırın her scroll event'inde yeniden render edilmesini zorunlu kılar.
Açıklama:getItemLayout, her satır için {length, offset, index} değerini önceden verir; böylece FlatList asenkron bir ölçüm geçişi olmadan scroll pozisyonlarını hesaplayabilir — bu da scrollToIndex/scrollToOffset'i anlık yapar ve layout takılmalarını azaltır.
Rn Performance RenderingZorluk 1
FlatList'teki initialNumToRender prop'u neyi kontrol eder?
- aİlk render geçişinde eş zamanlı render edilen öge sayısını.✓
- bListe mount olduğunda tetiklenen network isteği sayısını.
- cEkran dışına kaydıktan sonra bellekte tutulan öğe sayısını.
- dListenin ömrü boyunca hiç render edilecek toplam öğe sayısını.
Açıklama:initialNumToRender, kullanıcının içeriği hemen görmesi için ilk geçişte kaç satırın render edileceğini belirler; çok yüksek değer ilk mount'u yavaşlatır, çok düşük değer ise sonraki batch'ler render edilene kadar kısa süreliğine boş alan gösterebilir.
Rn Performance RenderingZorluk 2
Bir FlatList, satırları renderItem={({item}) => <Row item={item} selectedId={selectedId} />} ile render ediyor. Ekranın başka bir yerinde selectedId değiştiğinde, Row bu prop'u okuduğu halde hiçbir satır yeni seçimi yansıtacak şekilde güncellenmiyor. En olası sebep ve doğru düzeltme nedir?
- a
selectedId, data’nın parçası değildir; yeniden render’i zorlamak için extraData’ya geçirin.✓ - bFlatList renderItem çıktısını sonsuza kadar cache'ler; düzeltme, seçim değiştiğinde her öğenin
key'ini değiştirmektir. - cBu beklenen bir durumdur ve
SectionList'e geçmeden düzeltilemez. - dDış prop'ların algılanması için
renderItem düz bir fonksiyon yerine useEffect ile tanımlanmalıdır.
Açıklama:FlatList, satırları yeniden render edip etmeyeceğine data'ya (ve kendi prop'larına) dayalı yüzeysel bir karşılaştırmayla karar verir; renderItem içinde kullanılan ama data'nın parçası olmayan dış değerler extraData üzerinden geçirilmelidir ki FlatList değiştiklerinde yeniden render etmesi gerektiğini bilsin.
Rn Performance RenderingZorluk 2
Bir fonksiyonel component'i React.memo(Component) ile sarmalamak ne yapar?
- aKendi prop'larından bağımsız olarak component'in çocuklarının asla yeniden render edilmemesini sağlar.
- bComponent'in ilk render çıktısını uygulamanın ömrü boyunca kalıcı olarak cache'ler.
- cFonksiyonel component'i performans için içeride bir class component'e dönüştürür.
- dProp’lar öncekiyle yüzeysel olarak eşitse component’i yeniden render etmeyi atlar.✓
Açıklama:React.memo, prop'lar son render'a göre yüzeysel olarak eşitse React'in component'i yeniden render etmesini atlamasını sağlayacak şekilde sarmalar — sadece o component'i etkiler (doğrudan çocuklarını değil) ve bir prop referansı değiştiyse parent render'ı yine de yeniden render'a sebep olabilir.