React Native uygulamanız yavaşlıyor, bellek kullanımı artıyor veya UI donmaları mı yaşıyorsunuz? Flipper, Facebook tarafından geliştirilen açık kaynaklı bir hata ayıklama aracıdır ve React Native projelerinde performans sorunlarını tespit etmek için en etkili yöntemlerden birini sunar. Bu adım adım rehberde, Flipper'ı kurarak bellek profili çıkarmayı, UI performansını izlemeyi ve sorunları kaynağında çözmeyi öğreneceksiniz.
Flipper Nedir ve Neden Kullanmalısınız?
Flipper, mobil uygulamalar için bir hata ayıklama platformudur. React Native ile doğal entegrasyonu sayesinde, uygulamanızın çalışma zamanındaki bellek kullanımını, ağ isteklerini, logları ve UI işleme süreçlerini gerçek zamanlı olarak izleyebilirsiniz. Özellikle büyük ölçekli uygulamalarda, Cross-Platform Mobil Geliştirme sırasında performans darboğazlarını bulmak için Flipper vazgeçilmez bir araçtır. Daha önce React Native vs Flutter karşılaştırmasında da belirtildiği gibi, React Native'in avantajı JavaScript ile hızlı geliştirme yapabilmenizdir ancak performans yönetimi özen gerektirir.
Adım Adım Flipper Kurulum ve Kullanımı
Aşağıdaki adımları takip ederek Flipper'ı React Native projenize entegre edebilirsiniz.
- Flipper Masaüstü Uygulamasını İndirin ve Kurun: Flipper'ın resmi web sitesinden (fbflipper.com) işletim sisteminize uygun sürümü indirin. macOS, Windows ve Linux için destek mevcuttur.
- React Native Projenize Flipper Bağımlılığını Ekleyin: Projenizin kök dizininde terminali açın ve aşağıdaki komutu çalıştırın:
npm install react-native-flipper --save-dev
veyayarn add -D react-native-flipper - Flipper'ı Projenize Bağlayın: React Native 0.68 ve sonrasında auto-linking otomatik olarak çalışır. Ancak yine de podları yüklemeniz gerekebilir:
cd ios && pod install - Flipper'ı Başlatın ve Uygulamanızı Çalıştırın: Flipper masaüstü uygulamasını açın. Daha sonra React Native uygulamanızı bir emülatörde veya fiziksel cihazda başlatın:
npx react-native run-androidveyanpx react-native run-ios. Flipper otomatik olarak cihazınızı algılayacaktır. - Bellek Profili Çıkarma (Heap Snapshot): Flipper ana ekranında sol taraftaki "React DevTools" eklentisini bulun. Bu eklenti, bileşen ağacını ve her bir bileşenin kullandığı bellek miktarını gösterir. Bellek sızıntısı şüphesi olduğunda, bir işlem yapmadan önce ve sonra heap snapshot alın. Farkı karşılaştırarak hangi nesnelerin serbest bırakılmadığını tespit edebilirsiniz.
- UI Performansını İzleme (FPS Meter): Flipper'da "Performance" eklentisini etkinleştirin. Bu eklenti, uygulamanızın anlık FPS (Frame Per Second) değerini gösterir. 60 FPS altına düşüşler, UI donmalarına işaret eder. Hangi ekran veya işlem sırasında drop olduğunu görmek için zaman çizelgesini inceleyin.
- Ağ İsteklerini İzleme: "Network" eklentisi sayesinde uygulamanızdan yapılan tüm HTTP isteklerini ve yanıtlarını görebilirsiniz. Gecikmeli veya büyük boyutlu yanıtlar, UI performansını dolaylı olarak etkiler. React Native Push Notification Entegrasyonu gibi işlemlerde ağ isteklerinin optimize edilmesi önemlidir.
- Logları Filtreleme ve Analiz Etme: Flipper'ın "Logs" eklentisi, konsola yazdırdığınız tüm mesajları görüntüler. Renk kodlaması ve filtreleme özellikleri sayesinde hata mesajlarını hızlıca bulabilirsiniz.
Performans Sorunlarını Giderme İpuçları
Flipper ile belirlediğiniz sorunları çözmek için aşağıdaki yaygın stratejileri uygulayabilirsiniz:
- Bellek Sızıntıları: useEffect veya useLayoutEffect içinde temizleme fonksiyonlarını kullanmadığınızda sızıntılar oluşur. Özellikle setInterval, event listener veya async işlemleri temizlemeyi unutmayın.
- Gereksiz Yeniden Render'lar: React.memo, useMemo ve useCallback ile bileşenlerin gereksiz yere yeniden render edilmesini engelleyin. Flipper'ın React DevTools eklentisi, hangi bileşenlerin ne sıklıkta render edildiğini gösterir.
- Büyük Liste Performansı: FlatList kullanıyorsanız, getItemLayout, keyExtractor ve windowSize gibi özellikleri optimize edin. Ayrıca Infinite Scroll yapıyorsanız, pagination ve throttle uygulayın.
Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler
Flipper kullanırken aşağıdaki noktalara dikkat edin:
| Hata | Çözüm |
|---|---|
| Flipper cihazı algılamıyor | USB hata ayıklamayı etkinleştirin (Android) veya Flipper'ı iOS simülatöründe çalıştırırken ekstra adımları uygulayın. |
| Heap snapshot beklenenden büyük | Yalnızca ilgili bileşenleri snapshot alarak karşılaştırın. Tüm uygulamanın snapshot'ı yanıltıcı olabilir. |
| FPS değeri sürekli düşük | Kodunuzda ağır işlemler yapıyorsanız, bunları Web Worker veya requestAnimationFrame ile ana iş parçacığından ayırın. |