React Native New Architecture 2026: Panduan Lengkap Hermes V1, Fabric, dan TurboModules

React Native telah mengalami transformasi fundamental dengan arsitektur barunya yang kini menjadi standar di tahun 2026. Perubahan ini bukan sekadar pembaruan incremental, melainkan penulisan ulang menyeluruh yang menghadirkan performa setara aplikasi native. Arsitektur baru ini menggantikan bridge asinkron yang menjadi bottleneck selama bertahun-tahun dengan JavaScript Interface (JSI) yang memungkinkan komunikasi sinkron langsung antara JavaScript dan kode native. Bagi para developer yang ingin membangun aplikasi mobile berkinerja tinggi atau mempersiapkan diri menghadapi interview teknis, memahami komponen-komponen arsitektur baru ini merupakan keharusan.

Perbandingan Arsitektur Lama dan Baru

Memahami perbedaan fundamental antara kedua arsitektur sangat penting sebelum mendalami setiap komponennya. Tabel berikut merangkum perubahan pada setiap layer:

| Layer | Arsitektur Lama | Arsitektur Baru | |-------|-----------------|------------------| | JS Engine | JavaScriptCore | Hermes V1 (bytecode + JIT) | | Renderer | Paper (async bridge) | Fabric (synchronous, shared C++) | | Native Modules | Bridge Modules (JSON serialization) | TurboModules (JSI, direct calls) | | Komunikasi | Async JSON Bridge | JSI (JavaScript Interface) | | Inisialisasi | Bridge init + module registration | Bridgeless (lazy, on-demand) |

Arsitektur lama mengandalkan bridge asinkron yang melakukan serialisasi semua komunikasi ke format JSON. Setiap panggilan dari JavaScript ke native harus melalui antrian pesan, di-serialize, dikirim melalui bridge, di-deserialize, dieksekusi, lalu hasilnya mengalami proses yang sama untuk kembali ke JavaScript. Proses ini menciptakan latensi yang signifikan, terutama untuk operasi yang membutuhkan banyak komunikasi bolak-balik.

Arsitektur baru menghilangkan bridge sepenuhnya. JSI memungkinkan JavaScript mengakses objek C++ secara langsung melalui referensi. Tidak ada serialisasi JSON, tidak ada antrian pesan, dan panggilan dapat dilakukan secara sinkron ketika diperlukan. Hasilnya adalah peningkatan performa yang dramatis di semua metrik.

Hermes V1: Engine JavaScript Generasi Baru

Hermes V1 merupakan evolusi signifikan dari engine JavaScript yang dikembangkan Meta khusus untuk React Native. Berbeda dengan engine JavaScript umum seperti V8 atau JavaScriptCore yang dioptimalkan untuk browser, Hermes dirancang dari awal untuk kebutuhan spesifik aplikasi mobile.

Fitur utama Hermes V1 meliputi ahead-of-time (AOT) bytecode compilation. Kode JavaScript dikompilasi menjadi bytecode pada saat build, bukan saat runtime. Hal ini mengeliminasi fase parse dan compile yang biasanya terjadi saat aplikasi pertama kali dimuat, menghasilkan waktu startup yang jauh lebih cepat.

Garbage collector baru bernama Hades menggunakan pendekatan concurrent yang mengurangi pause time secara drastis. Pada arsitektur lama, garbage collection bisa menyebabkan jank yang terlihat saat scrolling FlatList dengan banyak item. Hermes V1 menjaga pause time di bawah 12ms, memastikan animasi dan scrolling tetap smooth di 60fps.

// 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

Benchmark di atas menunjukkan keunggulan Hermes V1 dalam tiga aspek kritis. Waktu startup berkurang hampir 30% dibandingkan JavaScriptCore. Penggunaan memori baseline lebih rendah 38%, yang sangat penting untuk perangkat dengan RAM terbatas. GC pause yang hampir empat kali lebih singkat memastikan pengalaman pengguna yang mulus tanpa frame drop.

Fabric Renderer: Rendering UI yang Sinkron

Fabric merupakan sistem rendering baru yang menggantikan Paper. Perbedaan fundamental terletak pada bagaimana tree UI dikelola dan diperbarui. Paper menggunakan bridge asinkron untuk semua operasi UI, yang berarti ada delay antara perubahan state di JavaScript dan pembaruan visual di layar.

Fabric menggunakan shared C++ core yang dapat diakses langsung oleh JavaScript melalui JSI. Shadow tree dihitung di C++ dan dapat diakses secara sinkron dari kedua sisi. Hal ini memungkinkan React untuk menggunakan fitur concurrent seperti useTransition dan Suspense dengan benar di React Native.

Salah satu keuntungan terbesar Fabric adalah kemampuannya untuk melakukan layout calculation secara sinkron. Ketika aplikasi perlu mengukur dimensi sebuah view sebelum melakukan operasi lain, Fabric dapat mengembalikan hasilnya secara langsung tanpa menunggu message queue.

// 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' },
})

Contoh di atas mendemonstrasikan penggunaan useTransition dengan Fabric. Input text diperbarui secara instan (operasi urgent), sementara filtering list ditandai sebagai operasi non-urgent yang dapat di-defer. Pada arsitektur lama, pattern ini tidak akan berfungsi dengan benar karena bridge asinkron tidak mendukung prioritization rendering React concurrent.

TurboModules: Native Modules dengan JSI

TurboModules merupakan pengganti bridge modules yang memanfaatkan JSI untuk komunikasi langsung dengan kode native. Keunggulan utamanya adalah kemampuan untuk melakukan panggilan sinkron tanpa overhead serialisasi JSON.

Pada sistem lama, setiap panggilan ke native module memerlukan serialisasi parameter ke JSON, pengiriman melalui message queue, deserialisasi di sisi native, eksekusi, lalu proses yang sama untuk mengirim hasil kembali. TurboModules menghilangkan semua langkah tersebut dengan memungkinkan JavaScript mengakses fungsi native secara langsung.

Proses pembuatan TurboModule dimulai dengan mendefinisikan spec menggunakan TypeScript atau Flow. Codegen akan membaca spec ini dan menghasilkan boilerplate code untuk platform iOS dan Android. Developer kemudian mengimplementasikan fungsi-fungsi yang didefinisikan di spec.

// 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')

Spec di atas mendefinisikan TurboModule dengan empat fungsi. Tiga fungsi pertama bersifat sinkron karena operasinya ringan dan hasilnya tersedia secara instan. Fungsi terakhir menggunakan Promise karena melibatkan operasi I/O yang membutuhkan waktu lebih lama.

Implementasi native untuk Android menggunakan Kotlin atau Java. Codegen menghasilkan base class yang harus di-extend, memastikan kontrak antara JavaScript dan native selalu konsisten.

// 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"
}

Perhatikan bahwa fungsi sinkron seperti getDeviceModel() mengembalikan nilai secara langsung. Tidak ada Promise, tidak ada callback. JavaScript dapat memanggil fungsi ini dan langsung menggunakan hasilnya di baris yang sama. Hal ini sangat berguna untuk operasi yang sering dipanggil dan membutuhkan nilai dengan segera.

Bridgeless Mode: Arsitektur Tanpa Bridge

Bridgeless Mode merupakan konfigurasi dimana bridge lama dihilangkan sepenuhnya dari runtime aplikasi. Ini bukan berarti menghilangkan semua komunikasi antara JavaScript dan native, melainkan mengganti mekanisme bridge dengan JSI secara total.

Keuntungan utama Bridgeless Mode adalah inisialisasi yang lebih cepat. Bridge lama memerlukan registrasi semua native modules saat startup, meskipun modul tersebut mungkin tidak pernah digunakan. Bridgeless Mode menggunakan lazy initialization dimana modul hanya di-load ketika pertama kali dibutuhkan.

Bridgeless Mode juga memungkinkan arsitektur yang lebih bersih karena semua komunikasi melalui satu mekanisme (JSI) tanpa perlu mempertahankan kode legacy untuk backward compatibility dengan bridge.

JavaScript Interface (JSI): Fondasi Arsitektur Baru

JSI merupakan layer abstraksi yang memungkinkan JavaScript mengakses objek C++ secara langsung. Ini adalah fondasi yang memungkinkan Fabric, TurboModules, dan fitur-fitur lain di arsitektur baru berfungsi.

Konsep kunci JSI adalah host objects. Objek C++ dapat diekspos ke JavaScript sebagai host object yang memiliki properti dan method yang dapat dipanggil langsung. Ketika JavaScript memanggil method pada host object, panggilan tersebut langsung dieksekusi di C++ tanpa melewati message queue atau serialisasi.

JSI juga mendukung host functions yang memungkinkan C++ mendefinisikan fungsi yang dapat dipanggil dari JavaScript. Kombinasi host objects dan host functions menciptakan jembatan langsung yang sangat efisien antara kedua dunia.

Benchmark Performa: Data Konkret

Berikut adalah benchmark komprehensif yang membandingkan arsitektur lama dan baru pada berbagai metrik:

| Metrik | Arsitektur Lama | Arsitektur Baru | Peningkatan | |--------|-----------------|------------------|-------------| | Cold start (TTI) | 1.4s | 0.8s | 43% lebih cepat | | Transisi layar | 180ms | 110ms | 39% lebih cepat | | Memory baseline | 89MB | 66MB | 26% lebih rendah | | Panggilan JS-ke-native | ~5ms (async) | ~0.1ms (sync) | 40x lebih cepat | | GC max pause | 45ms | 12ms | 73% lebih singkat | | FlatList scroll (1000 item) | Occasional jank | Smooth 60fps | Tanpa frame drop |

Data benchmark di atas dikumpulkan dari aplikasi produksi yang kompleks dengan lebih dari 50 layar dan berbagai fitur native. Peningkatan paling dramatis terlihat pada panggilan JS-ke-native yang menjadi 40 kali lebih cepat dengan TurboModules dibandingkan bridge modules.

Pengurangan memory baseline sebesar 26% sangat signifikan untuk perangkat mid-range yang masih banyak digunakan di berbagai pasar. Memory yang lebih rendah berarti aplikasi lebih jarang di-kill oleh sistem operasi saat berjalan di background.

Pertanyaan Interview React Native 2026

Berikut adalah pertanyaan-pertanyaan yang sering muncul dalam interview developer React Native terkait arsitektur baru:

Pertanyaan: Jelaskan perbedaan fundamental antara bridge lama dan JSI.

Jawaban yang baik harus mencakup: Bridge lama menggunakan serialisasi JSON dan message queue asinkron untuk semua komunikasi. Setiap panggilan melibatkan serialize, queue, deserialize di kedua arah. JSI memungkinkan JavaScript mengakses objek C++ secara langsung melalui host objects tanpa serialisasi. Panggilan dapat dilakukan secara sinkron dan hasilnya tersedia secara instan.

Pertanyaan: Mengapa Hermes menggunakan bytecode dan apa keuntungannya?

Jawaban yang baik harus mencakup: Bytecode di-compile pada saat build, bukan runtime. Ini menghilangkan waktu parse dan compile saat aplikasi dimuat. Bytecode juga lebih compact dibandingkan source code, mengurangi ukuran bundle dan waktu load dari disk.

Pertanyaan: Kapan sebaiknya menggunakan fungsi sinkron vs asinkron di TurboModules?

Jawaban yang baik harus mencakup: Fungsi sinkron untuk operasi yang cepat dan tidak melibatkan I/O, seperti mengambil nilai dari memory atau melakukan kalkulasi sederhana. Fungsi asinkron untuk operasi yang membutuhkan waktu seperti network request, file I/O, atau akses database. Menggunakan sinkron untuk operasi berat akan memblokir JavaScript thread.

Pertanyaan: Bagaimana Fabric mendukung fitur concurrent React?

Jawaban yang baik harus mencakup: Fabric menggunakan shared C++ shadow tree yang dapat diakses sinkron. Ini memungkinkan React melakukan prioritization rendering dimana update urgent diproses lebih dulu. useTransition dapat menandai update sebagai non-urgent yang bisa di-interrupt. Arsitektur lama tidak mendukung ini karena semua operasi melalui queue asinkron.

Pertanyaan: Apa yang dimaksud dengan lazy initialization di Bridgeless Mode?

Jawaban yang baik harus mencakup: Native modules tidak di-load dan di-register saat startup. Modul hanya di-initialize ketika pertama kali dipanggil dari JavaScript. Hal ini mengurangi waktu startup karena tidak perlu memproses modul yang mungkin tidak digunakan dalam session tersebut.

Migrasi dari Arsitektur Lama

Proses migrasi ke arsitektur baru memerlukan perencanaan yang matang, terutama untuk aplikasi yang menggunakan banyak library native pihak ketiga. Langkah pertama adalah memastikan semua dependencies mendukung arsitektur baru.

React Native Community telah menyediakan compatibility table yang mencantumkan status setiap library populer. Library yang belum mendukung arsitektur baru biasanya memiliki fork atau alternatif yang sudah kompatibel.

Untuk native modules internal yang dikembangkan sendiri, proses migrasi melibatkan konversi dari bridge modules ke TurboModules. Spec harus ditulis terlebih dahulu, kemudian Codegen dijalankan untuk menghasilkan boilerplate, dan terakhir implementasi native disesuaikan dengan interface baru.

Testing menyeluruh sangat penting setelah migrasi. Meskipun API dari sisi JavaScript sebagian besar tetap sama, perbedaan timing antara panggilan sinkron dan asinkron dapat mengungkap race condition yang sebelumnya tersembunyi.

Kesimpulan

Arsitektur baru React Native membawa perubahan fundamental yang menghadirkan performa setara aplikasi native. Poin-poin kunci yang perlu dipahami:

• Hermes V1 menggunakan ahead-of-time bytecode compilation dan garbage collector Hades untuk startup yang lebih cepat dan GC pause yang minimal
• Fabric menggantikan Paper dengan rendering sinkron berbasis C++ yang mendukung fitur concurrent React
• TurboModules memanfaatkan JSI untuk panggilan native yang hingga 40 kali lebih cepat dibandingkan bridge modules
• Bridgeless Mode menghilangkan bridge legacy sepenuhnya dan menggunakan lazy initialization untuk startup yang lebih cepat
• JSI sebagai fondasi memungkinkan JavaScript mengakses objek C++ secara langsung tanpa serialisasi
• Semua komponen ini bekerja bersama untuk menghasilkan pengurangan memory 26%, startup 43% lebih cepat, dan scrolling yang smooth tanpa dropped frames

Penguasaan arsitektur baru React Native menjadi keharusan bagi developer mobile di tahun 2026. Konsep-konsep ini tidak hanya penting untuk membangun aplikasi berkinerja tinggi, tetapi juga menjadi topik utama dalam interview teknis untuk posisi senior developer.