React Native’de Yeni Architecture (Fabric) ile Performans Artırma Teknikleri

React Native ekosistemi, yeni mimari (Fabric) ile birlikte önemli performans iyileştirmeleri sunuyor. Bu yazıda, Fabric mimarisinin avantajlarını ve bu yeni mimariyle nasıl daha performanslı uygulamalar geliştirebileceğinizi inceleyeceğiz.

Fabric Mimarisi Nedir?

Fabric, React Native’in yeni nesil render sistemidir. Temel olarak şu avantajları sunar:

• Daha hızlı başlangıç süresi
• Daha az bellek kullanımı
• Daha yüksek FPS (Frame Per Second)
• Doğrudan C++ ile iletişim

Eski mimaride JavaScript thread ile Native thread arasında bir köprü (Bridge) vardı ve bu performans darboğazına neden oluyordu. Fabric, bu köprüyü ortadan kaldırarak doğrudan iletişim sağlıyor.

Fabric Mimarisine Geçiş

React Native 0.68 ve sonrası sürümlerde Fabric varsayılan olarak etkin değil. Projenizi Fabric’e geçirmek için:

npx react-native init MyApp --version next

Veya mevcut projenizde:

1. android/gradle.properties dosyasını açın ve ekleyin:

newArchEnabled=true

2. ios/Podfile dosyasını açın ve ekleyin:

use_flipper!()
:flipper_configuration => flipper_enabled ? 'Flipper' : 'NoFlipper'

3. Bağımlılıkları yeniden kurun:

cd ios && pod install && cd ..

Fabric ile Performans Optimizasyon Teknikleri

1. Concurrent Rendering Kullanımı

Fabric, React 18’in concurrent özelliklerini destekler. Bu sayede render işlemleri kesintiye uğramadan devam edebilir.

import { unstable_createRoot } from 'react-native';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileScreen />
    </Suspense>
  );
}

unstable_createRoot(document.getElementById('root')).render(<App />);

2. Yeni Renderer API’leri

Fabric ile birlikte gelen yeni API’ler:

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

function AnimatedComponent() {
  const offset = useSharedValue(0);
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value * 255 }],
    };
  });

  return (
    <Animated.View style={[styles.box, animatedStyle]} />
  );
}

3. JSI (JavaScript Interface) Kullanımı

Fabric, JSI sayesinde JavaScript ve Native kod arasında daha hızlı iletişim sağlar. Özel native modüller oluştururken:

#include <jsi/jsi.h>
#include <ReactCommon/TurboModuleUtils.h>

using namespace facebook;

void installMyModule(jsi::Runtime &rt) {
  auto myFunction = jsi::Function::createFromHostFunction(
    rt,
    jsi::PropNameID::forAscii(rt, "myFunction"),
    0,
    [](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) -> jsi::Value {
      return jsi::Value(42);
    }
  );
  
  rt.global().setProperty(rt, "myFunction", std::move(myFunction));
}

4. View Flattening Optimizasyonu

Fabric, gereksiz view hiyerarşisini otomatik olarak düzleştirir. Ancak siz de manuel olarak optimize edebilirsiniz:

// Kötü:
<View>
  <View>
    <Text>Merhaba</Text>
  </View>
</View>

// İyi:
<View>
  <Text>Merhaba</Text>
</View>

Performans İzleme ve Debug

Fabric ile gelen yeni debug araçları:

import { Performance } from 'react-native';

// Render süresini ölçme
const onPress = () => {
  Performance.mark('screen_rendering_start');
  // İşlemler...
  Performance.mark('screen_rendering_end');
  Performance.measure('screen_rendering', 'screen_rendering_start', 'screen_rendering_end');
};

Best Practices

1. Büyük Listeler için Optimizasyon: FlatList yerine FlashList kullanın
2. Gereksiz Re-render’ı Önleyin: React.memo ve useMemo kullanın
3. Animasyonlar için Reanimated: Native thread’de çalışan animasyonlar kullanın
4. Resim Optimizasyonu: resizeMode ve uygun boyutlar kullanın
5. Code Splitting: Dinamik import ile bileşen yüklemeyi geciktirin

Sonuç

React Native Fabric mimarisi, mobil uygulama geliştiricilerine önemli performans avantajları sunuyor. Bu yeni mimariyi etkin kullanarak:

• %40’a varan başlangıç süresi iyileştirmesi
• %15-20 daha az bellek kullanımı
• Daha yüksek ve tutarlı FPS değerleri

elde edebilirsiniz. Fabric henüz tam olgunluğa ulaşmamış olsa da, yeni projelerde kullanımı giderek yaygınlaşıyor.

Önemli İpuçları:

• Testlerinizi hem eski hem de yeni mimaride çalıştırın
• Performans metriklerini düzenli olarak ölçün ve karşılaştırın
• Native modüllerinizi JSI’ye uyumlu hale getirin
• React Native ekibinin Fabric dokümantasyonunu takip edin

Fabric, React Native’in geleceğini

💡 Hızlı Özet

Bu yazıda React Native’de Yeni Architechture (Fabric) ile Performans Artırma Teknikleri konusunu detaylı olarak ele aldık. Öğrendiklerinizi projelerinizde uygulayarak deneyim kazanmayı unutmayın!

📱 Beni Takip Edin:

• GitHub: @ademhatay
• Blog: ademhatay.com