React Native’de Yeni Başlayanlar İçin Performans İpuçları ve Hatalardan Kaçınma

React Native, cross-platform mobil uygulama geliştirme için güçlü bir araç olsa da, performans sorunlarıyla karşılaşmamak için bazı temel prensipleri bilmek önemlidir. Bu rehberde, yeni başlayanlar için kritik performans ipuçlarını ve yaygın hatalardan nasıl kaçınacağınızı adım adım ele alacağız.

1. Gereksiz Render’ları Önleme

React Native’de en yaygın performans sorunlarından biri gereksiz bileşen render’larıdır.

React.memo Kullanımı

import React, { memo } from 'react';
import { View, Text } from 'react-native';

const MyComponent = memo(({ title }) => {
  console.log('MyComponent rendered');
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
});

export default MyComponent;

useCallback ve useMemo ile Optimizasyon

import React, { useState, useCallback, useMemo } from 'react';
import { Button, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  const heavyCalculation = useMemo(() => {
    return expensiveCalculation(count);
  }, [count]);

  return (
    <View>
      <Button title="Arttır" onPress={increment} />
      <Text>Sonuç: {heavyCalculation}</Text>
    </View>
  );
};

2. Listelerde Key Kullanımı

Listeleri render ederken uygun key prop’unu kullanmak performansı önemli ölçüde artırır.

import { FlatList, Text, View } from 'react-native';

const data = [
  { id: '1', name: 'Item 1' },
  { id: '2', name: 'Item 2' },
  // ...
];

const ItemList = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
};

3. Görsel Optimizasyonu

Büyük görseller uygulama performansını ciddi şekilde etkileyebilir.

Resim Boyutlandırma

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  resizeMode="contain"
/>

Progressive Image Loading

import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 200, height: 200 }}
  source={{
    uri: 'https://example.com/image.jpg',
    priority: FastImage.priority.normal,
  }}
  resizeMode={FastImage.resizeMode.contain}
/>

4. JavaScript Thread’i Tıkanıklığını Önleme

Uzun süren JavaScript işlemleri UI thread’ini bloke edebilir.

Ağır Hesaplamaları Web Worker’lara Taşıma

// worker.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

// Ana komponent
import { useEffect, useState } from 'react';
import { Worker } from 'react-native-workers';


```javascript
const App = () => {
  const [result, setResult] = useState(null);
  
  useEffect(() => {
    const worker = new Worker('worker.js');
    worker.postMessage(inputData);
    worker.onmessage = (e) => setResult(e.data);
    
    return () => worker.terminate();
  }, []);
  
  return <Text>{result}</Text>;
};

5. Animasyonlar için Doğru Yaklaşım

Animasyonlar için her zaman Native Driver’ı kullanın.

import { Animated, Easing } from 'react-native';

const fadeAnim = new Animated.Value(0);

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 1000,
  easing: Easing.linear,
  useNativeDriver: true, // Bu kritik!
}).start();

6. Memory Leak’leri Önleme

Component unmount olduğunda kaynakları serbest bırakın.

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const subscription = SomeEventEmitter.addListener('event', handler);
    
    return () => {
      subscription.remove();
      // Diğer temizlik işlemleri
    };
  }, []);
  
  // ...
};

7. Debugging Performans Sorunları

Performance Monitor Kullanımı

import { Performance } from 'react-native-performance';

Performance.start('expensive_operation');
// Pahalı işlem
Performance.end('expensive_operation');

React DevTools Profiler

Chrome DevTools’ta React Profiler’ı kullanarak render performansını analiz edebilirsiniz.

Önemli İpuçları ve Tavsiyeler

1. FlatList kullanın: Uzun listeler için her zaman ScrollView yerine FlatList veya SectionList kullanın.
2. Gereksiz state’lerden kaçının: Local state yerine component props’larını kullanmaya çalışın.
3. Büyük veri setlerini chunk’lara bölün: API’den büyük veri setleri alırken pagination kullanın.
4. Hermes Engine’i etkinleştirin: React Native 0.60+ ile gelen Hermes JavaScript engine’i performansı önemli ölçüde artırır.
5. Gereksiz kütüphanelerden kaçının: Projenize eklediğiniz her kütüphane paket boyutunu ve başlangıç süresini artırır.
6. Production modunda test edin: Debug modda performans gerçek kullanıma göre çok farklı olabilir.
7. **

💡 Hızlı Özet

Bu yazıda React Native’de Yeni Başlayanlar İçin Performans İpuçları ve Hatalardan Kaçınma konusunu detaylı olarak ele aldık. Öğrendiklerinizi projelerinizde uygulayarak deneyim kazanmayı unutmayın!

📱 Beni Takip Edin:

• GitHub: @ademhatay
• Blog: ademhatay.com