Yavaş çalışan React Native uygulamasını ölçüp hızlandırma yöntemi

Önce ölç: performans sorunu neresinde?

Performans çalışmasının ilk kuralı tahmin yürütmemektir. React Native'de iş iki ana iş parçacığında yürür: JavaScript tarafında iş mantığı ve React render'ı, yerel (native) tarafta arayüz çizimi. Kullanıcının "yavaş" dediği şey çoğu zaman bu iki taraftan birinin sıkışmasıdır. JavaScript tarafı meşgulse dokunmalara geç yanıt verilir; çizim tarafı meşgulse kaydırma takılır.

Teşhise gerçek cihazda ve üretim derlemesine yakın bir yapılandırmada başlayın. Geliştirme modu ek denetimler yaptığı için olduğundan yavaş görünür; emülatör de gerçek bir orta segment cihazı yansıtmaz. Geliştirici menüsündeki performans izleyicisi, React'in profil aracı ve platformun kendi profilleyicileri (Android Studio ve Xcode araçları) sorunun hangi katmanda olduğunu gösterir.

Uzun listeler: FlatList ayarları

Takılmanın en sık kaynağı listelerdir. React Native belgeleri FlatList için birkaç ayar önerir ve her birinin bir bedeli olduğunu açıkça belirtir:

• initialNumToRender: İlk render'da kaç öğe çizileceğini belirler. Ekranı dolduracak kadar olmalı; çok düşükse boş alan görünür.
• windowSize: Ekranın üstünde ve altında kaç ekran yüksekliğinde içeriğin hazır tutulacağını belirler. Büyütmek boşluğu azaltır ama bellek harcar.
• maxToRenderPerBatch: Her kaydırma turunda render edilen öğe sayısı. Yükseltmek boşlukları azaltır ama JavaScript'i meşgul eder.
• updateCellsBatchingPeriod: Toplu render'lar arasındaki bekleme süresi.
• removeClippedSubviews: Ekran dışındaki görünümleri yerel hiyerarşiden ayırır; bazı durumlarda içerik kaybolması gibi yan etkileri olabilir, bu yüzden kullanıldığında iOS'ta özellikle test edilmelidir.

Bu ayarlar tek başına mucize değildir. Önce öğe bileşeninin kendisini hafifletmek daha çok kazandırır.

Liste öğesini hafifletmek: memo, keyExtractor, getItemLayout

Belge, liste öğesi için basit bileşen kullanmayı önerir: derin iç içe yapı ve ağır mantık olmasın, büyük listeler için ayrı hafif bir bileşen yazılsın. Öğe bileşenini React.memo ile sarmak, yalnızca ilgili özellikleri değiştiğinde yeniden render edilmesini sağlar.

Örnek senaryo: bir sipariş listesinde yalnızca seçili satırın rengi değişiyor. Öğe bileşeni memo ile sarılmamışsa, seçim değişince listedeki bütün satırlar yeniden render edilir. Memo ile yalnızca iki satır, eski ve yeni seçili olan, güncellenir.

Bunun yanında: • renderItem fonksiyonunu JSX içinde isimsiz fonksiyon olarak yazmak yerine dışarıda tanımlayıp useCallback ile sarın. • keyExtractor ile kararlı bir anahtar verin; sıralama değiştiğinde öğeler doğru eşlenir. • Tüm öğelerin yüksekliği aynıysa getItemLayout vererek asenkron yerleşim hesabını ortadan kaldırın. • Görselleri küçük boyutta ve önbellekli yükleyin; her görsel yüklemesi JavaScript iş parçacığına yük bindirir.

Gereksiz render'ları bulmak ve engellemek

Uygulama genelinde yavaşlığın ikinci büyük nedeni, durumun (state) gereğinden yukarıda tutulmasıdır. Bir ekranın kökünde tutulan sık değişen değer, altındaki bütün ağacı yeniden render ettirir. Örneğin bir arama kutusuna yazılan her harf ekranın kök bileşeninde saklanıyorsa, listeden başlığa kadar her şey her harfte yeniden çizilir.

Çözüm yöntemleri sırayla şunlardır: durumu onu kullanan bileşene yaklaştırmak, ağır hesapları useMemo ile önbelleğe almak, alt bileşenlere geçen fonksiyonları useCallback ile sabitlemek, gerekirse bileşenleri memo ile sarmak. Burada dikkat edilecek nokta, memo'nun her yere serpiştirilmemesidir; karşılaştırmanın kendisi de maliyetlidir. Profil aracında gerçekten sık ve gereksiz render eden bileşenleri bulup yalnızca onlara uygulayın.

Açılış süresi, animasyon ve köprü yükü

Uygulamanın açılışı yavaşsa kontrol edilecekler: başlangıçta gereksiz yüklenen kütüphaneler, ilk ekranda yapılan ağır hesaplar ve ilk açılışta eşzamanlı yapılan ağ istekleridir. Ekranı hemen göstermek, veriyi ardından yüklemek algılanan hızı iyileştirir.

Animasyonlarda temel ilke, animasyonu mümkün olduğunca yerel tarafta çalıştırmaktır. JavaScript iş parçacığı meşgul olduğunda JavaScript'ten sürülen animasyon karelerini kaçırır. Animasyon kütüphanelerinin yerel sürücü seçenekleri bu amaçla vardır.

İleri düzeyde, React Native'in yeni mimarisi JavaScript ile yerel kod arasındaki iletişim biçimini değiştirir ve bazı darboğazları azaltır. Projenizin hangi mimariyle çalıştığını ve kullandığınız kütüphanelerin uyumunu resmî belgeden kontrol edin.

Durum yönetimi, ağ ve görseller

Liste dışında üç alan sık kazanç sağlar. Birincisi küresel durum yönetimidir: bütün uygulamayı tek bir büyük durum nesnesine bağlamak, küçük bir değişiklikte çok sayıda bileşeni uyandırır. Bileşenlerin yalnızca ihtiyaç duyduğu dilimi okuması bu yayılmayı sınırlar.

İkincisi ağ: aynı veriyi ekran her açıldığında yeniden çekmek hem gecikme hem pil harcaması yaratır. Önbellek, ekran geçişinde eski veriyi hemen gösterip arka planda yenileme ve gereksiz tekrarlanan isteklerin birleştirilmesi algılanan hızı belirgin biçimde iyileştirir.

Üçüncüsü görsellerdir: ekranda küçük görünecek bir görseli büyük boyutlu indirmek, hem ağı hem belleği zorlar. Sunucudan uygun boyutta görsel istemek ve önbellekleyen bir görsel bileşeni kullanmak iyi bir alışkanlıktır. Bellek sorunlarında, ekrandan çıkan bileşenlerde temizlenmeyen zamanlayıcı ve olay dinleyicileri de sızıntı kaynağıdır; bileşen kaldırılırken bunları temizlemek gerekir.

Sık yapılan hatalar

• Geliştirme modundaki hızı ölçüt almak.
• Ölçmeden memo, useMemo ve useCallback eklemek; kodu karmaşıklaştırır, kazanç vermeyebilir.
• ScrollView içinde uzun liste çizmek; bütün öğeler bir arada render edilir, uzun veri için FlatList kullanılmalıdır.
• Büyük görselleri küçültmeden listede göstermek.
• Konsol günlüğünü üretim paketinde açık bırakmak; yoğun günlükleme JavaScript iş parçacığını yorar.
• Tek seferde çok sayıda değişiklik yapıp hangisinin işe yaradığını bilememek. Her değişiklikten sonra aynı senaryoyu aynı cihazda tekrar ölçün.

İyi bir çalışma düzeni şudur: senaryoyu tanımla (örneğin uzun listeyi hızlı kaydırma), ölç, tek bir değişiklik yap, tekrar ölç, işe yaradıysa tut.

Bu beceriyi Mindset programlarında nerede çalışırsınız?

React Native ile Cross-Platform Mobil programında Performans Optimizasyonu ve Sorun Giderme modülü, mobil uygulamayı canlıya çıkarmadan önce darboğazları arayan geliştiriciler için tasarlanmıştır. Aynı programın Ağ, Kimlik Doğrulama ve Güvenlik ile Native Modüller ve Platform Köprüsü başlıkları, yavaşlığın nedeninin çoğu zaman bu katmanlarda bulunması nedeniyle ilgilidir.

React Native İleri Seviye ve Yerel Modül Geliştirme programında Performans Optimizasyonu ayrı bir modüldür; yerel kod yazan ya da yeni mimariye geçen ekipler için daha derin bir sonraki adımdır.