React Native Uygulamanızın Performansını Arttırın!

React Native Nedir? Nasıl Öğrenilir? makalemden sonra çoğu kişi “Mustafa kardeş iyi güzelde peki React Native performans arttırma olayını nasıl yapacağız?” gibi sorular sorduğu için bu makaleyi yayınlıyorum.

React Native JavaScript tabanlıdır ve daha hızlı çalışması için bazı iyileştirmelere ihtiyaç duyar, bu makalede React Native uygulamalarının daha performanslı çalışabilmesi için yapılması gereken yöntemleri listeledim.

React Native Mimarisi

React Native JavaScript tabanlıdır, bir köprü aracılığıyla native ile etkileşimlidir, dolayısıyla iki önemli bölümü vardır.

Java, Swift veya Objective-C tabanlı Native bölümü.
JavaScript tabanlı React Native bölümü.

Aşağıdaki yöntemleri deneyerek uygulamanızın performansını arttırabilirsiniz.

Bellek Problemi

Arka planda gereksiz bir çok işlem çalıştığı için uygulamalarda bellek problemi en yaygın sorunlardan biridir.

Xcode kullanarak sorunları bulma

Xcode -> Product ->Profile veya (⌘ + i)

Android Studio kullanarak sorunları bulma

React Native uygulamanızı çalıştırın.
Android Studio’yu açın.
Menüde Tools -> Android ->Enable ADB Integration tıklayın.
Tools -> Android -> Android Device Monitor tıklayın.
Android cihaz monitörü görüntülendiğinde, Monitor → Preferences tıklayın.

Android için bellek sorunlarını bulmanın en iyi yolu Perf Monitor kullanmaktır.

Import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';
PerfMonitor.toggle();
 PerfMonitor.start();
 setTimeout(() => {
   PerfMonitor.stop();
 }, 20000);
}, 5000);

Bellek sorunlarını çözmek için Listview yerine FlatList, SectionList veya VirtualList gibi kaydırılabilir listeler kullanabilirsiniz.

Eğer, pull to refresh (yenilemek için aşağı kaydır) kullanarak sonsuz listeleme gibi işlemler yapıyorsanız kaydırılabilir listeler işinizi kolaylaştıracaktır.

Görsel Boyutunu Azaltın

Görseller bellek kullanımı açısından oldukça büyük bir problem, React Native görsel optimizasyonu konusunda pek iyi değil.

Düşük boyutlu görseller kullanın.
JPG yerine PNG kullanın.
Görsellerinizi WebP formatına dönüştürün.

Neden WebP?

WebP kullanarak görsellerinizin yüklenme süresini %28 oranında arttırabilirsiniz.
WebP, CodePush işlemlerinizin boyutunu %66 oranında azaltır.
Uygulama içi dolaşımlar çok daha iyidir.

Görselleri Önbellekleyin

Görsel önbelleklemesi görsellerinizin hızlı yüklenmesi için çok önemlidir.

Görsel önbelleklemesi şu an sadece IOS için geçerlidir.

Aşağıdaki basit örneği incelebilirsiniz.

	<Image
  		source={{
    			uri: 'https://facebook.github.io/react/logo-og.png',
    			cache: 'only-if-cached',
 		 }}
 	 	style={{width: 400, height: 400}}
	/>

Android için bazı npm kütüphaneleri var fakat maalesef en iyi performansı sunmuyorlar.

JSON Verilerini Optimize Etme

Mobil uygulamalar bazı işlemler için bir servise veya bir bağlantıya istek gönderir ve dönen sonucu işlerler.

Genellikle, yazılımcıların çoğu JSON işlemesi yavaş olduğu ve çevrimdışı erişim için JSON verilerini depolar. Bu yüzden benim tavsiyem, JSON verilerini işlemeden önce daha basit nesnelere dönüştürmeniz.

fetch('baglanti', {
 method: 'POST',
 headers: {
    Accept: 'application/json',
   'Content-Type': 'application/json',
 },
 body: JSON.stringify({
   birinciParametre: 'birinciParametreDegeri',
   ikinciParametre: 'ikinciParametreDegeri',
 }),
}).then((response) => response.json())
  .then((responseJson) => {
       // JSON.parse kullanarak verilerinizi nesnelere dönüştürün.
       var response = JSON.parse(responseJson);
       return response;
     })
   .catch((error) => {
     console.error(error);
   })

NativeDriver Animasyonları Kullanın

React Native animasyonları gayet iyidir ve oluşturması kolaydır.

Animasyonun çalışma yapısı;

JavaScript her framede requestAnimationFrame kullanır.
Değerler hesaplanır ve görünüme iletilir.
setNativeProps kullanılarak görünüm güncellenir.
Köprü kullanılarak bu değişiklikler native ortama iletilir.
Native bölümü UIView veya android.View güncellemesini yapar.

NativeDriver çalışma yapısı;

Her framede CADisplayLink veya android.view.Choreographer kullanır.
Değerler hesaplanır ve görünüme iletilir.
UIView veya android.View güncellenir.

	Animated.timing(
            this.state.fadeAnim, {
            toValue: 1,
            userNativeDriver: true,
           }
        ).start()

<Animated.ScrollView // <-- Animated.ScrollView kullanın.
  scrollEventThrottle={1} // <-- Milisaniye cinsinden tetiklenme süresi
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // <-- Bunu ekleyin.
  )}
>
  {icerik}
</Animated.ScrollView >