React Native uygulamalarında performans sorunları genellikle yanlış state yönetimi, gereksiz re-render'lar ve optimize edilmemiş liste görüntülemeden kaynaklanır. Bu yazıda, bu sorunları gidermek için pratik ipuçları ve kontrol listesi sunuyoruz.
React Native Performansının Temel İlkeleri
React Native, JavaScript thread ile native thread arasında bir köprü (bridge) kullanır. Bu köprü üzerinden geçen her veri, performansı etkileyebilir. Bu nedenle, gereksiz bridge iletişimini azaltmak ve native tarafta mümkün olduğunca çok iş yapmak önemlidir. Ayrıca, state yönetimi seçiminiz performans üzerinde büyük rol oynar. Daha önce detaylandırdığımız React State Management Karşılaştırması yazısında, Context API, Redux Toolkit ve Zustand arasındaki farkları incelemiştik; özellikle büyük ölçekli uygulamalarda state yönetimi performansa doğrudan etki eder.
FlatList ve ScrollView Optimizasyonu
Liste görüntüleme, mobil uygulamalarda en sık karşılaşılan performans darboğazlarından biridir. Aşağıdaki ipuçlarıyla FlatList performansınızı artırabilirsiniz:
- keyExtractor kullanın: Her öğe için benzersiz bir anahtar sağlayın. Bu, React'in hangi öğelerin değiştiğini hızlıca anlamasını sağlar.
- getItemLayout özelliğini ayarlayın: Sabit yükseklikli öğeler için bu optimizasyon, scroll sırasında hesaplama yükünü azaltır.
- initialNumToRender ve maxToRenderPerBatch değerlerini optimize edin: Varsayılan değerler genellikle iyi çalışır, ancak büyük listelerde bu değerleri düşürmek performansı artırabilir.
- windowSize değerini küçültün: Ekranda görünen alanın dışındaki öğelerin render edilmesini engeller.
- removeClippedSubviews kullanın: Görünmeyen alt görünümleri kaldırarak bellek kullanımını azaltır.
Resim ve Medya Yönetimi
Resimler, uygulama boyutunu ve bellek kullanımını önemli ölçüde etkiler. Şu yöntemlerle optimizasyon yapabilirsiniz:
- fast-image kütüphanesi kullanın: react-native-fast-image, önbellekleme ve daha hızlı yükleme sunar.
- Resimleri yeniden boyutlandırın: Sunucuda veya istemcide resimleri ihtiyaç duyulan boyutlara küçültün.
- Lazy loading uygulayın: Sadece ekrana gelen resimleri yükleyin.
- WebP formatını tercih edin: Daha küçük dosya boyutuyla kaliteli görüntü sağlar.
Native Modüller ve JSBridge
JavaScript ve native taraf arasındaki her iletişim maliyetlidir. İşte bu maliyeti azaltma yolları:
- TurboModules kullanın: React Native 0.64 ve sonrasında sunulan TurboModules, bridge üzerinden senkron iletişim sağlar ve performansı artırır.
- JSI (JavaScript Interface) ile doğrudan erişim: JSI, JavaScript'in native modüllere doğrudan erişmesini sağlayarak bridge yükünü ortadan kaldırır. https://reactnative.dev/docs/the-new-architecture
- Ağır hesaplamaları native tarafta yapın: Örneğin, görüntü işleme gibi yoğun işlemleri native modüle taşıyın.
State Yönetimi Seçimleri
State yönetimi, re-render'ları tetikler. Gereksiz re-render'ları önlemek için:
- React.memo ve useMemo kullanın: Bileşenlerin yalnızca gerekli durumlarda yeniden render edilmesini sağlayın.
- useCallback ile fonksiyon referanslarını sabitleyin: Alt bileşenlere geçirilen callback'lerin her render'da yeniden oluşmasını engelleyin.
- State'i mümkün olduğunca aşağıda tutun: Global state yerine, state'i ihtiyaç duyan en yakın bileşende tutun.
- Redux Toolkit veya Zustand gibi optimize kütüphaneler tercih edin: Bu kütüphaneler, state güncellemelerini optimize ederek gereksiz render'ları azaltır. Örneğin, Veri depolama yazımızda Redux Persist gibi çözümlerin performansa etkisini karşılaştırdık.
Memory Leak'leri Önleme
Memory leak'leri, uygulamanın zamanla yavaşlamasına ve çökmesine neden olur. Aşağıdaki kontrolleri yapın:
- Abone olunan event'leri temizleyin: useEffect dönüş fonksiyonunda event listener'ları kaldırın.
- setTimeout ve setInterval referanslarını tutun: Bileşen unmount olduğunda clearTimeout/clearInterval çağırın.
- Büyük nesneleri referans olarak tutmayın: Kullanılmayan büyük veri yapılarını null yaparak garbage collector'e yardımcı olun.
- Resim önbelleğini yönetin: fast-image gibi kütüphaneler otomatik önbellek temizliği yapar, ancak manuel temizlik de gerekebilir.
Kontrol Listesi
Uygulamanızın performansını değerlendirmek için aşağıdaki maddeleri kontrol edin:
- FlatList keyExtractor ve getItemLayout ayarları yapıldı mı?
- Resimler için fast-image kullanılıyor mu ve boyutlandırma yapıldı mı?
- React.memo, useMemo ve useCallback optimizasyonları uygulandı mı?
- State yönetimi, performans göz önünde bulundurularak seçildi mi?
- Memory leak testi (örn. React DevTools ile) yapıldı mı?
- Native modüller mümkün olduğunca kullanılıyor mu?
- Uygulama profil oluşturma (Hermes profiler ile) analiz edildi mi?
Performans optimizasyonu sürekli bir süreçtir. Yukarıdaki ipuçlarını uygulayarak ve REST API'lerde Hata Yönetimi gibi diğer kaynaklardan da faydalanarak uygulamanızı hızlandırabilirsiniz. Unutmayın, her uygulama benzersizdir; bu nedenle profil oluşturma araçlarıyla hangi alanların optimizasyona ihtiyacı olduğunu tespit edin.
Sık Sorulan Sorular
React Native'de performansı artırmak için ilk adım nedir?
İlk adım, uygulamanızı profillemektir. React Native'in built-in profiler'ı veya Hermes profiler ile hangi bileşenlerin yeniden render olduğunu, bridge üzerinden ne kadar veri geçtiğini görün. Ardından en büyük darboğazı belirleyip optimize edin.
FlatList'te performans sorunları nasıl giderilir?
keyExtractor, getItemLayout, initialNumToRender ve windowSize gibi özellikleri optimize edin. Ayrıca removeClippedSubviews kullanarak görünmeyen öğeleri kaldırın. Büyük listelerde maxToRenderPerBatch değerini düşürün.
Memory leak'leri nasıl tespit ederim?
React DevTools'un profiler'ını kullanarak bileşenlerin unmount olup olmadığını kontrol edin. Ayrıca Chrome Memory tab veya Android Studio Memory Profiler ile heap analizi yapın. Event listener'ların ve timer'ların temizlendiğinden emin olun.
TurboModules nedir ve nasıl kullanılır?
TurboModules, React Native'in yeni mimarisinde sunulan ve JavaScript ile native modüller arasında daha hızlı iletişim sağlayan bir yapıdır. Kullanmak için React Native 0.64 veya üzeri sürüm gereklidir ve modüllerinizi TurboModule spec'lerine uygun şekilde yazmanız gerekir.
