React Native Performans Rehberi: Yüksek Hızlı Uygulama Geliştirme
Yazar: Burak Balkı | Kategori: Performance | Okuma Süresi: 8 dk
Bu kapsamlı rehberde, React Native uygulamalarında performans optimizasyonu için mimari detaylar, render stratejileri, liste yönetimi ve bellek sızıntılarını...
React Native, tek bir JavaScript kod tabanıyla hem iOS hem de Android platformlarında yerel performans sunan uygulamalar geliştirmenize olanak tanır. Ancak, karmaşık arayüzler ve yoğun veri işleme süreçleri söz konusu olduğunda, doğru optimizasyon teknikleri uygulanmazsa performans darboğazları kaçınılmaz hale gelir. Bu rehberde, bir **React Native** uygulamasını en yüksek verimlilikle çalıştırmak için gereken stratejileri teknik detaylarıyla ele alacağız.
## React Native Mimarisini Anlamak
Performans optimizasyonuna girmeden önce, React Native'in çalışma prensibini anlamak gerekir. Geleneksel React Native mimarisi üç ana parçadan oluşur:
1. **JavaScript Thread:** İş mantığının ve React kodunun çalıştığı yer.
2. **Native Thread:** UI render işlemleri ve kullanıcı etkileşimlerinin yönetildiği platforma özel katman.
3. **The Bridge:** JavaScript ve Native tarafları arasındaki iletişimi sağlayan asenkron köprü.
Performans sorunlarının %90'ı, bu köprü (Bridge) üzerindeki aşırı trafikten kaynaklanır. Modern sürümlerde gelen **JSI (JavaScript Interface)**, bu köprüyü ortadan kaldırarak JavaScript'in native nesnelere doğrudan erişmesini sağlar.
## Render Performansını Optimize Etme
React Native'de en sık karşılaşılan sorun, gereksiz bileşen render (yeniden çizim) işlemleridir. Her render, CPU ve bellek tüketimi demektir.
### useMemo ve useCallback Kullanımı
Referans eşitliğini korumak, alt bileşenlerin gereksiz yere render edilmesini önler. Özellikle fonksiyonlar ve büyük objeler her render'da yeniden oluşturulmamalıdır.
```javascript
import React, { useMemo, useCallback } from 'react';
const ExpensiveComponent = ({ data, onPress }) => {
const processedData = useMemo(() => {
return data.map(item => ({ ...item, active: true }));
}, [data]);
const handlePress = useCallback(() => {
onPress(processedData);
}, [processedData, onPress]);
return ;
};
```
### React.memo ile Bileşen Sabitleme
Bir bileşenin props değerleri değişmediği sürece yeniden render edilmesini engellemek için `React.memo` kullanılmalıdır.
```javascript
const ListItem = React.memo(({ title }) => {
return {title} ;
});
```
## Liste Performansı: FlatList Optimizasyonu
Büyük veri setlerini listelerken `ScrollView` kullanmak tüm elemanları belleğe yükler. Bunun yerine `FlatList` kullanılmalı ve aşağıdaki parametrelerle optimize edilmelidir.
| Parametre | Açıklama | Önerilen Değer |
| :--- | :--- | :--- |
| `initialNumToRender` | İlk yüklemede kaç öğe çizileceği | 10 |
| `windowSize` | Görünür alan dışındaki tampon bölge | 5 |
| `maxToRenderPerBatch` | Her döngüde çizilecek maksimum öğe | 10 |
| `removeClippedSubviews` | Ekran dışı öğeleri bellekten atar | true |
```javascript
item.id}
getItemLayout={(data, index) => (
{ length: 70, offset: 70 * index, index }
)}
removeClippedSubviews={true}
initialNumToRender={10}
maxToRenderPerBatch={10}
/>
```
> **Not:** `getItemLayout` kullanımı, listenin eleman boyutlarını önceden bilmesini sağlayarak dinamik hesaplama yükünü ortadan kaldırır.
## Görsel ve Medya Optimizasyonu
Resimler, mobil uygulamalarda bellek tüketiminin en büyük nedenidir. React Native'in varsayılan `Image` bileşeni bazen yetersiz kalabilir.
### FastImage Kullanımı
`react-native-fast-image`, resim önbelleğe alma (caching) ve önceliklendirme konusunda standart bileşenden çok daha üstündür.
```javascript
import FastImage from 'react-native-fast-image';