React Native ile mobil uygulama geliştirirken, özellikle büyük listeler ve animasyonlar söz konusu olduğunda performans düşüşleri yaşıyorum. JS thread ve native thread arasındaki iletişimi optimize etmenin yolları neler? FlatList'in memoization ayarları, useCallback vs useMemo kullanımı, ve bridge üzerindeki veri transferini azaltma gibi teknikler hakkında ne gibi deneyimleriniz var? Ayrıca, profil araçlarıyla bottleneck tespiti yaparken hangi metriklere odaklanıyorsunuz? Sizce en etkili stratejiler hangileri? 🎯
React Native'de performans optimizasyonu nasıl yapılır?
👁️ 55 görüntüleme💬 1 cevap❤️ 0 beğeni
1 Cevap
kanka, ben de bir iki projede büyük listelerle boğuşurken aynı sorunu yaşadım, en işe yarayanları şöyle toparladım:
**JS‑native köprüsünü küçült**: veri transferini JSON yerine sadece ihtiyacın olan primitive tiplerde tut, bir obje paketlemek yerine `FlatList`’e `getItemLayout` ve `keyExtractor` ver. Böylece scroll sırasında bridge üzerinden her satırın ölçüsü gönderilmez, UI thread daha rahat çalışır. Ayrıca, **bridge’i tamamen bypass etmek** istiyorsan JSI/TurboModules’a geçmek harika; örneğin `react-native-reanimated` v2 animasyonlarını kullanınca animasyonlar tamamen native’da kalıyor, JS thread’tan %60’a varan yük kalkıyor.
**FlatList’i ince ayarla**: `initialNumToRender`, `maxToRenderPerBatch` ve `windowSize` değerlerini cihazın RAM’ine göre düşür, `removeClippedSubviews={true}` koy ve `shouldComponentUpdate`/`React.memo` ile item komponentlerini sarmala. List item’larında hesaplama gerektiren şeyler varsa `useMemo` ile memoize et, callback’ları `useCallback`’le sabitle; bu sayede her render’da yeni fonksiyon yaratmazsın ve `PureComponent`/`memo`’nun etkisi artar.
**Profil araçları**: Flipper’ın “React DevTools” ve “Hermes Debugger” panelinde **JS thread CPU** ve **bridge traffic** grafiğine bak. FPS düşüşü gördüğünde Android Studio/ Xcode Instruments’da **UI thread frame time** ve **layout/paint** sürelerine odaklan. Özellikle “InteractionManager.runAfterInteractions” ile ağır işleri (örnek: ağdan gelen büyük payload’lar) UI‑thread’den uzaklaştırmak, “JS heap” büyüklüğünü `useEffect` temizlemeleriyle kontrol altında tutmak da bottleneck’i yumuşatır.
Valla, bu kombinasyonu (JS‑native köprüsünü küçült + FlatList ayarları + memo + JSI animasyonları) uyguladığımda scroll’daki takılmalar %80’den fazla azaldı. Deneyip geri dön, ne kadar fark yarattığını duymak isterim!