2026'da React Native Yeni Mimari: Hermes V1, Bridgeless Mod ve Mülakat Soruları

React Native Yeni Mimari 2026 yılında tam olgunluğa ulaştı. React Native 0.84 ile Hermes V1 varsayılan JavaScript motoru olarak gelirken, 0.85 sürümü eski bridge'in son izlerini de tamamen kaldırdı. Framework artık mimari bayrakları veya uyumluluk katmanları hakkında düşünmek zorunda kalmadan yerel performansa yakın sonuçlar sunuyor.

React Native Mimari Yığınında Neler Değişti

Eski React Native mimarisi, JavaScript ile yerel kod arasında mesaj iletmek için tek iş parçacıklı, asenkron bir JSON bridge'e dayanıyordu. Her etkileşim bu darboğazdan geçiyordu: dokunma olayları, düzen hesaplamaları, modül çağrıları. Yeni Mimari bu boru hattının her katmanını doğrudan, senkron bir alternatifle değiştiriyor.

| Katman | Eski Mimari | Yeni Mimari | |--------|------------|-------------| | JS Motoru | JavaScriptCore | Hermes V1 (bytecode + JIT) | | Renderer | Paper (asenkron bridge) | Fabric (senkron, paylaşımlı C++) | | Yerel Modüller | Bridge Modülleri (JSON serileştirme) | TurboModules (JSI, doğrudan çağrılar) | | İletişim | Asenkron JSON Bridge | JSI (JavaScript Interface) | | Başlatma | Bridge başlatma + modül kaydı | Bridgeless (tembel, isteğe bağlı) |

JSI (JavaScript Interface) temel yapı taşıdır. Her çağrıyı JSON'a serileştirip bir kuyruktan geçirmek yerine, JSI C++ host nesnelerini doğrudan JavaScript'e sunar. Daha önce JSON kodlama, bridge kuyruğuna ekleme ve JSON kod çözme gerektiren bir TurboModule çağrısı artık doğrudan bir fonksiyon çağrısı olarak gerçekleşir.

Hermes V1: Varsayılan JavaScript Motoru

Hermes V1, Şubat 2026'da yayınlanan React Native 0.84 ile birlikte varsayılan motor haline geldi. Bu, önceki Hermes sürümlerinin üzerine yapılan artımlı bir güncelleme değil, derleyici ve sanal makinenin tamamen yeniden yazılmasıdır.

İyileştirmeler dört alanı kapsıyor: yeni bytecode formatına sahip yeniden yazılmış derleyici, geliştirilmiş JIT derleyicisi, Hades eşzamanlı çöp toplayıcısı ve React 19 tarafından kullanılan modern JavaScript kalıpları için daha iyi destek.

// Comparing startup and runtime metrics

// Hermes V1 bytecode is pre-compiled at build time
// No parse-compile step at runtime = faster cold starts

// Cold start comparison (production build, Pixel 8):
// Hermes V1:  ~850ms TTI
// JSC:        ~1200ms TTI  (29% slower)

// Memory footprint (complex app, 50+ screens):
// Hermes V1:  ~45MB baseline
// JSC:        ~72MB baseline (38% more)

// GC pause comparison (FlatList, 500+ complex cells):
// Hermes V1 (Hades):  <12ms max pause
// Old Hermes:         ~45ms occasional pauses
// Result: zero dropped frames in scroll benchmarks

Hades eşzamanlı çöp toplayıcısı özellikle dikkat çekicidir. Önceki Hermes sürümleri, liste kaydırma sırasında zaman zaman görünür takılmalara neden olan stop-the-world GC kullanıyordu. Hades, toplama işlemini arka plan iş parçacığında eşzamanlı olarak çalıştırarak GC duraklamalarını 12 ms'nin altında tutar. Karmaşık hücrelerle uzun listeler oluşturan uygulamalarda bu, JavaScript tarafındaki kare düşüşlerinin son kaynağını ortadan kaldırır.

Fabric Renderer: Senkron Düzen ve Oluşturma

Fabric, Paper renderer'ı iOS ve Android arasında paylaşılan bir C++ çekirdeğiyle değiştirir. Kritik fark: düzen hesaplamaları bridge üzerinden asenkron yerine JavaScript iş parçacığında senkron olarak gerçekleşir.

Bu senkron model, Paper ile imkansız olan iki yeteneği mümkün kılar:

1. Eşzamanlı oluşturma desteği: Fabric, React 19'un eşzamanlı özellikleriyle entegre olur. Transitions, Suspense sınırları ve useTransition, Fabric'in oluşturmayı kesip devam ettirebilmesi sayesinde doğru şekilde çalışır.

2. Doğrudan C++ düzeni: Yoga (düzen motoru) JavaScript runtime ile aynı bellek alanında çalışır. Flexbox hesaplamaları için serileştirme yükü yoktur.

// Concurrent features work correctly with Fabric
import React, { useState, useTransition } from 'react'
import { View, Text, FlatList, TextInput, StyleSheet } from 'react-native'

type Item = { id: string; name: string; category: string }

function SearchableList({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('')
  const [filtered, setFiltered] = useState(items)
  const [isPending, startTransition] = useTransition()

  const handleSearch = (text: string) => {
    setQuery(text) // Urgent: update input immediately
    startTransition(() => {
      // Non-urgent: filter can be deferred
      const result = items.filter(item =>
        item.name.toLowerCase().includes(text.toLowerCase())
      )
      setFiltered(result)
    })
  }

  return (
    <View style={styles.container}>
      <TextInput
        value={query}
        onChangeText={handleSearch}
        placeholder="Search items..."
        style={styles.input}
      />
      {isPending && <Text style={styles.pending}>Filtering...</Text>}
      <FlatList
        data={filtered}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.row}>
            <Text>{item.name}</Text>
          </View>
        )}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 12, marginBottom: 8 },
  pending: { color: '#888', marginBottom: 4 },
  row: { padding: 12, borderBottomWidth: 1, borderBottomColor: '#eee' },
})

Bu örnekteki useTransition hook'u, Fabric'in neden önemli olduğunu göstermektedir. Paper ile startTransition hiçbir etki yaratmıyordu çünkü renderer devam eden bir oluşturmayı kesemiyordu. Fabric'in React 19 eşzamanlı moduyla entegrasyonu, ertelenmiş güncellemelerin tasarlandığı şekilde çalışmasını sağlayarak arka planda binlerce öğeyi filtrelerken metin girişinin yanıt verebilirliğini korur.

TurboModules ve JSI: Serileştirme Yükünün Ortadan Kaldırılması

TurboModules, eski NativeModules sisteminin yerini alır. Performans farkı JSON serileştirmesinin tamamen ortadan kaldırılmasından kaynaklanır. Bir bridge modülü çağrısı şu yolu izliyordu: JS nesnesi -> JSON.stringify -> bridge kuyruğu -> JSON.parse -> yerel çağrı -> JSON.stringify -> bridge kuyruğu -> JSON.parse -> JS callback. TurboModule çağrısı ise JSI üzerinden doğrudan bir C++ fonksiyon çağrısıdır.

// TurboModule spec using the Codegen
import type { TurboModule } from 'react-native'
import { TurboModuleRegistry } from 'react-native'

export interface Spec extends TurboModule {
  // Synchronous: returns immediately, no bridge round-trip
  getDeviceModel(): string
  getOSVersion(): string
  getBatteryLevel(): number

  // Asynchronous: for operations that genuinely need async
  getStorageUsage(): Promise<{ used: number; total: number }>
}

export default TurboModuleRegistry.getEnforcing<Spec>('DeviceInfo')

// Native Android implementation of the TurboModule
package com.app.modules

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReadableMap
import com.facebook.react.bridge.WritableNativeMap
import com.facebook.react.module.annotations.ReactModule

@ReactModule(name = "DeviceInfo")
class DeviceInfoModule(reactContext: ReactApplicationContext) :
  NativeDeviceInfoSpec(reactContext) {

  // Synchronous via JSI - no bridge, no JSON, no queue
  override fun getDeviceModel(): String {
    return android.os.Build.MODEL
  }

  override fun getOSVersion(): String {
    return "Android ${android.os.Build.VERSION.RELEASE}"
  }

  override fun getBatteryLevel(): Double {
    val manager = reactApplicationContext
      .getSystemService(android.content.Context.BATTERY_SERVICE)
      as android.os.BatteryManager
    return manager.getIntProperty(
      android.os.BatteryManager.BATTERY_PROPERTY_CAPACITY
    ).toDouble()
  }

  override fun getStorageUsage(
    promise: com.facebook.react.bridge.Promise
  ) {
    val stat = android.os.StatFs(
      android.os.Environment.getDataDirectory().path
    )
    val map = WritableNativeMap().apply {
      putDouble("used", (stat.totalBytes - stat.availableBytes).toDouble())
      putDouble("total", stat.totalBytes.toDouble())
    }
    promise.resolve(map)
  }

  override fun getName(): String = "DeviceInfo"
}

Kilit nokta: getDeviceModel(), getOSVersion() ve getBatteryLevel() senkron çağrılardır. JavaScript iş parçacığı doğrudan yerel koda çağrı yapar ve aynı tick'te dönüş değerini alır. Promise yok, callback yok, bridge gidiş-dönüşü yok. Bu yalnızca JSI sayesinde mümkündür.

Bridgeless Mod: Neleri Kaldırır ve Neden Önemlidir

Bridgeless Mod, React Native 0.73'te tanıtıldı ve 0.74'te varsayılan olarak ayarlandı. Bridge başlatmasını tamamen kaldırarak mimari geçişini tamamlar. Fabric ve TurboModules benimsendikten sonra bile eski bridge, global olay yayıcıları, zamanlayıcılar ve hata işlemeyi yönetmek için başlangıçta hala başlatılıyordu. Bridgeless Mod bu kalan sistemleri JSI tabanlı uygulamalara taşır.

Pratik etkisi:

• Daha hızlı başlatma: Bridge başlatma yükü yok. Çalışma zamanı, tembel yükleme sayesinde yalnızca uygulamanın gerçekten kullandığı bileşenleri başlatır.
• Azaltılmış bellek kullanımı: Başlangıçta bridge veri yapıları için bellek ayırma yok.
• Daha temiz hata işleme: Error boundary'ler ve global hata işleyiciler, bridge geri dönüşleri olmadan yeni mimari üzerinden çalışır.

React Native 0.82 eski bridge'i kalıcı olarak devre dışı bıraktı. Nisan 2026'da yayınlanan React Native 0.85, kod tabanından bridge ile ilgili tüm kodu kaldırdı. Geri dönüş yolu bulunmuyor.

Üretim Ortamı Geçişi: Gerçek Dünya Performans Kıyaslamaları

Eski mimariden Yeni Mimariye yapılan üretim geçişleri, temel metriklerde tutarlı iyileşmeler göstermektedir:

| Metrik | Eski Mimari | Yeni Mimari | İyileşme | |--------|------------|-------------|----------| | Soğuk başlatma (TTI) | 1,4 sn | 0,8 sn | %43 daha hızlı | | Ekran geçişi | 180 ms | 110 ms | %39 daha hızlı | | Temel bellek kullanımı | 89 MB | 66 MB | %26 daha az | | JS-yerel çağrı | ~5 ms (async) | ~0,1 ms (sync) | 40x daha hızlı | | Maks GC duraklaması | 45 ms | 12 ms | %73 daha kısa | | FlatList kaydırma (1000 öğe) | Zaman zaman takılma | Akıcı 60 fps | Düşen kare yok |

Kullanıcı deneyimi açısından en etkili iyileştirme GC duraklaması azalmasıdır. Hades, toplama duraklamalarını bir kare bütçesinin (60 fps'de 16,6 ms) altında tutar ve karmaşık React Native uygulamalarında görünür takılmaların en yaygın kaynağını ortadan kaldırır.

2026'da Ekosistem Uyumluluğu

Ekosistem Yeni Mimariye tamamen yakınsamıştır. Expo SDK 55 ve sonraki sürümler yalnızca Yeni Mimari üzerinde çalışır ve devre dışı bırakma seçeneği yoktur. Temel kütüphane uyumluluğu:

• React Navigation 7.2+: native-stack ekranlarıyla tam Fabric desteği
• Reanimated 3.5+: React Native 0.85 ile paylaşımlı animasyon arka ucu
• Gesture Handler 2.16+: JSI tabanlı doğrudan hareket tanıma
• Vision Camera 4.0+: JSI üzerinden kare işleme
• Detox: Yeni Mimari ile uyumlu E2E testleri

Expo kullanan ekipler için npx create-expo-app komutu Yeni Mimari varsayılan olarak etkin bir proje oluşturur. Yapılandırma gerekmez.

Mülakat Soruları: React Native Yeni Mimari

Bu sorular 2026 yılında üst düzey React Native mülakatlarında sıklıkla karşımıza çıkmaktadır. Her yanıt, staff/senior seviyesinde beklenen derinliği kapsamaktadır.

S1: Eski Bridge ile JSI arasındaki farkı açıklayın. JSI neden senkron yerel çağrıları mümkün kılar?

Bridge, her JS-yerel mesajını JSON olarak serileştiriyor, asenkron bir kuyruğa atıyor ve yerel tarafta deserileştiriyordu. JSI (JavaScript Interface), C++ host nesnelerini doğrudan JavaScript VM'de kullanıma sunar. JSI üzerinden kaydedilen yerel fonksiyonlar, serileştirme veya kuyruğa ekleme olmadan yerel kodu satır içi çalıştıran normal JavaScript fonksiyonları olarak görünür. Senkron çağrılar mümkündür çünkü JSI, ara mesaj kuyruğu olmadan aynı iş parçacığı bağlamında çalışır.

S2: Fabric renderer Paper'ın çözemediği hangi sorunu çözer?

Paper, bridge üzerinden asenkron olarak oluşturma yapıyordu ve bu da React eşzamanlı özelliklerinin desteklenmesini imkansız kılıyordu. startTransition çağrısının hiçbir etkisi yoktu çünkü Paper devam eden bir oluşturma ağacını kesemiyordu. Fabric, oluşturmayı paylaşımlı C++ kodunda uygular, React 19 reconciler ile doğrudan entegre olur ve eşzamanlı oluşturma, Suspense ve transition'ları destekler. Yoga üzerinden düzen hesaplamaları da aynı bellek alanında senkron olarak gerçekleşir, böylece bridge üzerinden düzen gecikmesi ortadan kalkar.

S3: Yeni Mimari için Hermes neden gereklidir? Başka bir motor kullanılabilir mi?

Yeni Mimari, JavaScript motorunun C++ host nesne kaydını desteklemesini gerektiren JSI'ye bağlıdır. Hermes, başından itibaren JSI entegrasyonu göz önünde bulundurularak tasarlanmıştır. JavaScriptCore teorik olarak JSI'yi destekleyebilir ancak resmi uygulama ve testler Hermes etrafında inşa edilmiştir. Hermes V1 ayrıca bytecode ön derleme (çalışma zamanı ayrıştırmasını ortadan kaldırır), Hades eşzamanlı GC (12 ms'nin altında duraklamalar) ve WebAssembly desteği sağlar; bunların hiçbiri React Native JSC entegrasyonunda mevcut değildir.

S4: TurboModules, geliştirici perspektifinden eski NativeModules API'sinden nasıl farklıdır?

TurboModules, derleme zamanında tür güvenli yerel bağlamalar oluşturan bir Codegen spesifikasyonu (TurboModule'ü genişleten TypeScript arayüzü) gerektirir. Eski NativeModules, tür denetimi olmadan çalışma zamanı yansıması kullanıyordu. TurboModules senkron dönüş değerlerini (yalnızca promise değil), tembel başlatmayı (modüller yalnızca ilk erişimde yüklenir) ve JSON serileştirmesi olmadan doğrudan JSI çağrılarını destekler. Geliştirici TypeScript spesifikasyonu yazar, Codegen'i çalıştırır ve oluşturulan yerel arayüzü uygular.

S5: Bridgeless Modu açıklayın ve yalnızca Fabric ve TurboModules'a sahip olmaya kıyasla neleri kaldırır?

Fabric ve TurboModules benimsendikten sonra bile eski bridge, global olay yayıcıları, zamanlayıcılar, hata işleme ve diğer çalışma zamanı altyapısını yönetmek için başlangıçta hala başlatılıyordu. Bridgeless Mod, bridge'e bağımlı bu kalan sistemleri JSI tabanlı uygulamalarla değiştirir. Bridge başlatma yükünü ortadan kaldırır, temel bellek kullanımını azaltır ve tüm çalışma zamanının JSI üzerinden çalışmasını sağlar. React Native 0.85'ten itibaren Bridgeless Mod tek çalışma modudur.

Bu soruları çalışan kod örnekleriyle pratik yapmak hem kavramsal anlayışı hem de pratik hatırlamayı güçlendirir. SharpSkill'in React Native Yeni Mimari modülü Fabric, TurboModules, Hermes iç yapıları ve geçiş stratejileri üzerine 40'tan fazla ek soru içermektedir.

Sonuç

• Hermes V1, React Native 0.84+ ile kutudan çıktığı gibi %29 daha hızlı soğuk başlatma, %38 daha düşük bellek kullanımı ve 12 ms altında GC duraklamaları sunar
• Fabric, Paper'ın hiçbir zaman destekleyemediği React 19 eşzamanlı özelliklerini (transitions, Suspense) mümkün kılar
• TurboModules, JSON serileştirmesini ortadan kaldırarak doğrudan JSI çağrısıyla JS-yerel çağrıları 40 kat hızlandırır
• Bridgeless Mod son bridge bağımlılıklarını kaldırır; React Native 0.85'te bridge kodu kalmamıştır
• Ekosistem tamamen uyumludur: Expo SDK 55+, React Navigation 7.2+, Reanimated 3.5+ ve tüm büyük kütüphaneler yalnızca Yeni Mimariyi destekler
• Mülakat hazırlığı JSI mekanikleri, Fabric-Paper karşılaştırması, TurboModule Codegen iş akışı ve Bridgeless Mod çalışma zamanı değişikliklerine odaklanmalıdır