React Native’de Yeni Architecture (Fabric & TurboModules) ile Performans Optimizasyonu

React Native ekibi, uygulama performansını ve geliştirici deneyimini önemli ölçüde artıran yeni bir mimari sunuyor: Fabric ve TurboModules. Bu yenilikler, özellikle büyük ölçekli uygulamalarda karşılaşılan performans sorunlarını çözmeyi hedefliyor.

Yeni Mimaride Neler Değişti?

Fabric: Yeni Render Sistemi

Fabric, React Native’in render mekanizmasını tamamen yeniden yazıyor. Eski mimarideki “bridge” kavramının yarattığı darboğazları ortadan kaldırıyor.

Temel Avantajları:

• JavaScript ve native kod arasında daha az iletişim
• Daha hızlı render süreleri
• Daha az bellek kullanımı
• Daha akıcı kullanıcı deneyimi

TurboModules: Daha Hızlı Native Modüller

TurboModules, native modüllerin JavaScript tarafından nasıl çağrıldığını optimize ediyor. Eski sistemdeki “lazy loading” sorunlarını çözüyor.

Temel Avantajları:

• Native modüller sadece ihtiyaç duyulduğunda yükleniyor
• Daha hızlı başlangıç süreleri
• Daha az bellek kullanımı

Yeni Mimaride Kod Örnekleri

Fabric ile Özel Native Component Oluşturma

// MyCustomComponent.js
import React from 'react';
import {requireNativeComponent} from 'react-native';

const MyCustomComponent = requireNativeComponent('MyCustomComponent');

const App = () => {
  return <MyCustomComponent style={{width: 100, height: 100}} />;
};

export default App;

// MyCustomComponentManager.java (Android)
public class MyCustomComponentManager extends SimpleViewManager<View> {
  @Override
  public String getName() {
    return "MyCustomComponent";
  }

  @Override
  public View createViewInstance(ThemedReactContext context) {
    return new View(context);
  }
}

TurboModule Kullanım Örneği

// NativeSampleModule.js
import {TurboModuleRegistry} from 'react-native';

export default TurboModuleRegistry.getEnforcing('SampleModule');

// SampleModule.java (Android)
@ReactModule(name = "SampleModule")
public class SampleModule extends ReactContextBaseJavaModule {
  @Override
  public String getName() {
    return "SampleModule";
  }

  @ReactMethod
  public void doSomething(String param, Promise promise) {
    // Native işlemler
    promise.resolve("Sonuç: " + param);
  }
}

Performans Optimizasyon Teknikleri

1. Render Optimizasyonu

Yeni mimaride useMemo ve React.memo kullanımı daha da kritik hale geliyor:

const ExpensiveComponent = React.memo(({data}) => {
  // Component mantığı
  return <View>{/* ... */}</View>;
});

function App() {
  const data = useMemo(() => computeExpensiveValue(), []);
  
  return <ExpensiveComponent data={data} />;
}

2. Native Modül Kullanımı

TurboModules ile native modülleri daha verimli kullanmak için:

useEffect(() => {
  const loadData = async () => {
    try {
      const result = await SampleModule.doSomething('param');
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  };

  loadData();
}, []);

3. Liste Performansı

Büyük listeler için FlashList gibi optimize edilmiş kütüphaneler kullanın:

import {FlashList} from '@shopify/flash-list';

function LargeList() {
  const data = [...]; // Büyük veri seti

  return (
    <FlashList
      data={data}
      renderItem={({item}) => <ListItem item={item} />}
      estimatedItemSize={200}
    />
  );
}

Geçiş Süreci ve Best Practices

Mevcut Uygulamaları Yeni Mimarilere Taşıma

1. React Native Sürümünü Güncelle: En az 0.68 sürümüne geçin
2. Yeni Arch Özelliğini Etkinleştir: android/gradle.properties ve ios/Podfile dosyalarında gerekli ayarları yapın
3. Native Modülleri Güncelle: TurboModules uyumlu hale getirin
4. Test ve Optimizasyon: Kapsamlı performans testleri yapın

Önemli İpuçları

1. Incremental Adoption: Uygulamanın tamamını bir anda değil, parça parça geçirin
2. Performance Monitoring: Firebase Performance veya benzeri araçlarla performansı sürekli izleyin
3. Code Splitting: JavaScript paketlerini küçültmek için code splitting uygulayın
4. Hermes Kullanımı: JavaScript motoru olarak Hermes’i tercih edin

Sonuç

React Native’in yeni mimarisi (Fabric ve TurboModules), mobil uygulama geliştiricilerine önemli performans avantajları sunuyor. Özellikle büyük ölçekli uygulamalarda:

• %30-50’ye varan render performansı iyileşmeleri
• %20-40 daha hızlı başlangıç süreleri
• Daha az bellek tüketimi
• Daha akıcı kullanıcı deneyimi

Yeni mimariye geçiş yaparken, uygulamanızın farklı bölümlerini aşamalı olarak güncellemeyi ve her adımda kapsamlı testler yapmayı unutmayın. Bu geçiş, özellikle kullanıcı deneyimini önemli ölçüde iyileştirecek ve

💡 Hızlı Özet

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

📱 Beni Takip Edin:

• GitHub: @ademhatay
• Blog: ademhatay.com