Mobil uygulama performansı kullanıcı deneyimini, dönüşümleri ve uygulamanızın başarısını doğrudan etkiler. React Native ve Flutter gibi çapraz platform çerçeveler yüksek hız ve verim vaat eder; ancak geliştirici seçimleri ve uygulama mimarisi performansı olumlu veya olumsuz yönde etkileyebilir. Bu yazıda React Native ve Flutter için pratik, kanıtlanmış performans iyileştirme tekniklerini, profil araçlarını ve uygulanabilir kod örneklerini bulacaksınız.
Neden performans optimizasyonu önemli?
Yavaş açılan ekranlar, takılmalar, yüksek bellek kullanımı ve fazla pil tüketimi kullanıcı kaybına yol açar. App Store ve Google Play incelemeleri, cihaz çeşitliliği ve ağ koşulları da dikkate alındığında, performans odaklı yaklaşımlar uygulamanızın stabil, hızlı ve güvenilir çalışmasını sağlar.
Göz önünde bulundurulması gereken yaygın darboğazlar
- Fazla render / rebuild: Gereksiz yeniden çizimler UI performansını düşürür. - Ana iş parçacığında ağır işlem: JS veya UI thread'te yoğun CPU işleri yapıldığında uygulama donar. - Büyük görüntü ve asset yükleri: Büyük resimler bellek ve ağ gecikmesi üretir. - Ağ gecikmeleri ve yanlış cache politikaları. - Animasyonların CPU ile işlenmesi (native yerine JS ile) ve frame drop.
React Native için en iyi uygulamalar
1. Render optimizasyonu
- PureComponent veya React.memo kullanın; gereksiz render'ları engelleyin. - Ana bileşenlerde büyük state objeleri yerine lokal state ve context / global store ayrımı yapın. - FlatList / SectionList kullanırken keyExtractor, getItemLayout, initialNumToRender ve windowSize gibi parametreleri ayarlayın.
// React.memo örneği
const MemoItem = React.memo(function Item({title, onPress}) {
return {title} 2. Fonksiyon ve referans yönetimi
- useCallback ve useMemo ile fonksiyon ve hesaplamaları memoize edin. - Render içinde anonim fonksiyonlar ve inline stil oluşturulmaması önerilir (her render yeni referans yaratır).
const handlePress = useCallback(() => {
// action
}, [dependencies]);
const styles = useMemo(() => createStyles(theme), [theme]);
3. Köprü (bridge) maliyetini azaltın
React Native'te JS ile native arasındaki köprü (bridge) maliyeti vardır. Çok sık mesaj göndermekten kaçının, toplu mesajlaşma veya native modüllerle tek çağrıya indirgeme yapın. Yeni JSI/TurboModules mimarisi ve Hermes kullanımı bu konuda yardımcı olur.
4. Animasyonlar
useNativeDriver: true parametresini kullanarak animasyonları native thread'e taşıyın. Daha ileri seviye için Reanimated 2 tercih edin.
Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }).start();
5. Build ve paket optimizasyonları
- Hermes motorunu Android ve iOS için değerlendirin (iOS'da Hermes desteği artıyor). - ProGuard/Gradle shrink ve minify ile gereksiz kodları çıkarın. - Üretim (release) modunda test edin; debug mode performansı yanıltıcı olabilir.
Flutter için en iyi uygulamalar
1. Widget yeniden oluşturulmalarını minimize edin
- Mümkün olduğunda const widget'lar kullanın. const olan widget'lar rebuild sırasında yeniden oluşturulmaz. - setState ile tüm ağacı güncellemek yerine daha lokal state yönetimi (Provider, Riverpod, Bloc) tercih edin.
// const kullanımına örnek
const Text('Başlık', style: TextStyle(fontSize: 18));
2. Ağır işler için Isolate kullanın
CPU yoğun işlemleri ana Dart isolate'ında çalıştırmak UI jank'ine neden olur. compute veya ayrı Isolate'lar kullanarak bu işleri arka planda yapın.
// Basit compute örneği
final result = await compute(parseLargeJson, jsonString);
3. RepaintBoundary ve render optimizasyonu
Sık güncellenen ve statik kısımları ayırmak için RepaintBoundary kullanın. Bu, gereksiz repaint'leri azaltır. Ayrıca Opacity gibi widget'lar maliyetli olabilir; alternatifler değerlendirilmelidir.
4. Görüntü ve asset optimizasyonu
- webp gibi modern sıkıştırma formatlarını kullanın, uygun çözünürlükte resimler sağlayın. - precacheImage ile önemli görselleri önceden yükleyin. - paket boyutunu azaltmak için --split-debug-info ve AOT/Tree shaking seçeneklerini kullanın.
Profiling ve araçlar
Performans iyileştirmesi önce doğru tespitle başlar. Hangi aracın hangi sorunu gösterdiğini bilin:
- React Native: Flipper, React DevTools, Perf Monitor, systrace ve Android Studio / Xcode profiler.
- Flutter: DevTools Performance, CPU profiler, Rasterizer timeline, memory profiler.
- Her iki platformda da gerçek cihazda test edin; emülatörler yanıltıcı olabilir.
Diğer pratik ipuçları
- Ağ: HTTP/2, gzip, önbellekleme başlıkları, pagination ve lazy load kullanın. - Cache: Görseller için disk/caching stratejileri uygulayın (React Native: react-native-fast-image, Flutter: cached_network_image). - Bellek: Büyük listeler için sayfa tabanlı yükleme, placeholder kullanımı ve bellek sızıntılarını düzenli tarayın. - Paket seçimi: Üçüncü taraf paketlerin performansını inceleyin; bazıları ağır native köprü çağrılarına neden olabilir. - Ölçümler: FPS, frame time (16ms hedef), jank sayısı, başlangıç süresi (cold start) ve bellek tepe değerlerini izleyin.
Kısa kontrol listesi (Checklist)
- Gereksiz render var mı? React.memo / const widget ile azaltıldı mı? - Ağ istekleri optimize edildi mi? Compression ve cache mevcut mu? - Ağır hesaplamalar isolate/worker'e taşındı mı? - Animasyonlar native tarafa alındı mı? - Görseller uygun format ve çözünürlükte kullanıldı mı? - Release build ve gerçek cihaz testleri yapıldı mı?
Sonuç
React Native ve Flutter her ikisi de yüksek performans sağlama potansiyeline sahiptir; fakat geliştiricilerin doğru teknikleri bilmesi ve uygulaması gerekir. Profil ile başlayın, en büyük darboğazları önceliklendirin ve platforma özgü optimizasyonları uygulayın. Basit adımlar (memoization, const widget, kullan-native-animasyon) çoğu zaman kullanıcı deneyiminde büyük iyileşmeler getirir. Performans sürekli bir süreçtir: izleyin, test edin ve düzenli olarak iyileştirin.
