Kiến Trúc Mới React Native 2026: Hermes V1, Fabric, TurboModules và Bridgeless Mode

Kiến Trúc Mới của React Native đánh dấu bước chuyển mình quan trọng nhất trong lịch sử phát triển của framework này. Sau nhiều năm nghiên cứu và phát triển, đội ngũ Meta đã hoàn thiện một hệ thống kiến trúc hiện đại, giải quyết triệt để những hạn chế cố hữu của phiên bản cũ. Năm 2026 chứng kiến sự trưởng thành hoàn toàn của Kiến Trúc Mới với Hermes V1 mang đến hiệu năng vượt trội, Fabric Renderer hỗ trợ concurrent rendering, TurboModules cho phép giao tiếp đồng bộ với native, và chế độ Bridgeless loại bỏ hoàn toàn bridge truyền thống. Những cải tiến này không chỉ nâng cao đáng kể hiệu suất ứng dụng mà còn mở ra nhiều khả năng mới cho các nhà phát triển React Native.

Tổng Quan Kiến Trúc Mới React Native

Kiến Trúc Mới được xây dựng dựa trên bốn trụ cột chính: Hermes V1 làm JavaScript engine, Fabric Renderer cho UI, TurboModules cho native modules, và JSI (JavaScript Interface) làm lớp giao tiếp nền tảng. Sự kết hợp này tạo nên một hệ thống hiệu quả hơn nhiều so với kiến trúc bridge truyền thống.

| Tầng | Kiến Trúc Cũ | Kiến Trúc Mới | |------|--------------|---------------| | JS Engine | JavaScriptCore | Hermes V1 (bytecode + JIT) | | Renderer | Paper (async bridge) | Fabric (đồng bộ, shared C++) | | Native Modules | Bridge Modules (JSON serialization) | TurboModules (JSI, gọi trực tiếp) | | Giao tiếp | Async JSON Bridge | JSI (JavaScript Interface) | | Khởi tạo | Bridge init + đăng ký module | Bridgeless (lazy, on-demand) |

Điểm khác biệt cốt lõi nằm ở việc loại bỏ bridge - cầu nối bất đồng bộ giữa JavaScript và native code. Trong kiến trúc cũ, mọi giao tiếp đều phải đi qua bridge với quá trình serialize/deserialize JSON, tạo ra độ trễ đáng kể và tiêu tốn bộ nhớ. Kiến Trúc Mới sử dụng JSI để cho phép JavaScript gọi trực tiếp các hàm C++, loại bỏ hoàn toàn overhead của bridge.

Hermes V1: JavaScript Engine Thế Hệ Mới

Hermes V1 đại diện cho bước tiến lớn trong công nghệ JavaScript engine tối ưu cho mobile. Phiên bản mới mang đến bytecode pre-compilation, garbage collector Hades với pause time cực thấp, và lazy compilation để cải thiện thời gian khởi động.

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

Điểm nổi bật của Hermes V1 là bytecode pre-compilation. Thay vì parse và compile JavaScript tại runtime như các engine truyền thống, Hermes V1 thực hiện quá trình này trong lúc build. Kết quả là ứng dụng khởi động nhanh hơn đáng kể vì không phải tốn thời gian parsing source code.

Garbage collector Hades là cải tiến quan trọng khác. Hades sử dụng concurrent collection, cho phép thu gom rác song song với việc thực thi JavaScript. Pause time tối đa chỉ còn khoảng 12ms - đủ ngắn để duy trì 60fps mượt mà ngay cả trong các ứng dụng phức tạp với nhiều dữ liệu.

Fabric Renderer và Concurrent Features

Fabric Renderer thay thế hoàn toàn Paper renderer cũ, mang đến khả năng synchronous rendering và hỗ trợ đầy đủ các concurrent features của React 18+. Fabric được viết bằng C++ và chia sẻ code giữa iOS và Android, đảm bảo tính nhất quán cross-platform.

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

Ví dụ trên minh họa cách sử dụng useTransition với Fabric. Khi người dùng nhập vào ô tìm kiếm, việc cập nhật input diễn ra ngay lập tức (urgent update), trong khi việc lọc danh sách được đánh dấu là non-urgent và có thể bị gián đoạn nếu có input mới. Điều này đảm bảo UI luôn responsive ngay cả khi xử lý danh sách lớn.

Fabric cũng hỗ trợ Suspense cho data fetching, cho phép các component "suspend" trong khi đợi dữ liệu và hiển thị fallback UI một cách tự nhiên. Đây là nền tảng để xây dựng trải nghiệm người dùng mượt mà hơn.

TurboModules: Native Modules Thế Hệ Mới

TurboModules thay thế Native Modules cũ, mang đến khả năng gọi native code một cách đồng bộ thông qua JSI. Thay vì phải serialize dữ liệu thành JSON và gửi qua bridge bất đồng bộ, TurboModules cho phép JavaScript gọi trực tiếp các hàm native với overhead gần như bằng không.

// 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 file trên định nghĩa interface của TurboModule sử dụng TypeScript. Codegen sẽ tự động tạo ra native code tương ứng cho cả iOS và Android, đảm bảo type safety xuyên suốt từ JavaScript đến native. Các phương thức đồng bộ như getDeviceModel() trả về giá trị ngay lập tức, trong khi các phương thức bất đồng bộ như getStorageUsage() vẫn sử dụng Promise cho các tác vụ cần thời gian xử lý.

Implementation phía Android sử dụng Kotlin như sau:

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

Lợi ích chính của TurboModules bao gồm lazy loading - module chỉ được load khi thực sự cần thiết, type safety nhờ Codegen, và hiệu năng cao hơn đáng kể nhờ gọi trực tiếp qua JSI thay vì bridge.

JSI - JavaScript Interface

JSI (JavaScript Interface) là nền tảng của toàn bộ Kiến Trúc Mới. JSI cho phép JavaScript và native code (C++) giao tiếp trực tiếp với nhau mà không cần thông qua bridge. Điều này có nghĩa là JavaScript có thể giữ reference đến native objects và gọi các phương thức trên chúng một cách đồng bộ.

JSI mang đến ba lợi ích quan trọng. Thứ nhất, synchronous calls cho phép JavaScript gọi native code và nhận kết quả ngay lập tức, không cần đợi round-trip qua bridge. Thứ hai, direct memory access cho phép chia sẻ bộ nhớ giữa JavaScript và native, hữu ích cho việc xử lý dữ liệu lớn như hình ảnh hoặc audio. Thứ ba, pluggable engines cho phép thay thế JavaScript engine một cách dễ dàng - đây là cách Hermes được tích hợp vào React Native.

Bridgeless Mode

Chế độ Bridgeless đánh dấu sự loại bỏ hoàn toàn bridge truyền thống khỏi React Native. Trong chế độ này, tất cả giao tiếp giữa JavaScript và native đều đi qua JSI, và các module được load một cách lazy khi cần thiết.

Lợi ích của Bridgeless Mode bao gồm thời gian khởi động nhanh hơn do không cần khởi tạo bridge và đăng ký tất cả native modules ngay từ đầu. Bộ nhớ sử dụng cũng giảm đáng kể vì các module chỉ được load khi thực sự cần. Đồng thời, hiệu năng runtime được cải thiện nhờ loại bỏ overhead của JSON serialization.

Benchmark Hiệu Năng

Các benchmark thực tế cho thấy những cải thiện đáng kể của Kiến Trúc Mới so với kiến trúc cũ:

| Chỉ Số | Kiến Trúc Cũ | Kiến Trúc Mới | Cải Thiện | |--------|--------------|---------------|----------| | Cold start (TTI) | 1.4s | 0.8s | Nhanh hơn 43% | | Chuyển màn hình | 180ms | 110ms | Nhanh hơn 39% | | Memory baseline | 89MB | 66MB | Giảm 26% | | JS-to-native call | ~5ms (async) | ~0.1ms (sync) | Nhanh hơn 40x | | GC max pause | 45ms | 12ms | Ngắn hơn 73% | | FlatList scroll (1000 items) | Giật đôi khi | Mượt 60fps | Không mất frame |

Những con số này được đo trên các thiết bị thực tế với ứng dụng production. Cải thiện đáng chú ý nhất là JS-to-native call nhanh hơn 40 lần nhờ loại bỏ bridge và sử dụng JSI cho giao tiếp đồng bộ.

Câu Hỏi Phỏng Vấn React Native 2026

Dưới đây là những câu hỏi phỏng vấn thường gặp về Kiến Trúc Mới React Native và cách trả lời chúng một cách hiệu quả.

Câu hỏi 1: JSI khác biệt như thế nào so với Bridge truyền thống?

Bridge truyền thống sử dụng giao tiếp bất đồng bộ, serialize dữ liệu thành JSON để truyền qua. Mọi lệnh gọi từ JavaScript đến native phải đợi trong queue và không thể nhận kết quả ngay lập tức. JSI loại bỏ hoàn toàn mô hình này bằng cách cho phép JavaScript giữ reference trực tiếp đến native objects (Host Objects). JavaScript có thể gọi các phương thức trên những objects này một cách đồng bộ, nhận kết quả ngay lập tức mà không cần serialize/deserialize. Điều này giảm latency từ vài milliseconds xuống còn micro-seconds.

Câu hỏi 2: TurboModules mang lại những lợi ích gì so với Native Modules cũ?

TurboModules mang đến ba cải tiến chính. Lazy loading nghĩa là modules chỉ được khởi tạo khi lần đầu tiên được sử dụng, thay vì tất cả đăng ký ngay khi app khởi động. Type safety nhờ Codegen tự động tạo interface từ spec files, đảm bảo type consistency giữa JavaScript và native. Hiệu năng cao hơn nhờ sử dụng JSI cho giao tiếp, hỗ trợ cả synchronous và asynchronous calls tùy theo nhu cầu.

Câu hỏi 3: Fabric Renderer cải thiện UI performance như thế nào?

Fabric được viết hoàn toàn bằng C++ và chia sẻ code giữa platforms, đảm bảo tính nhất quán. Fabric hỗ trợ synchronous layout calculation, nghĩa là UI có thể được đo lường và render đồng bộ với JavaScript thread. Điều này loại bỏ các vấn đề về layout flickering và ghost views. Fabric cũng hỗ trợ đầy đủ concurrent features của React 18+ như Suspense, Transitions và Automatic Batching, cho phép xây dựng UI responsive hơn.

Câu hỏi 4: Hermes V1 khác gì so với các phiên bản Hermes trước?

Hermes V1 mang đến garbage collector Hades với concurrent collection, giảm max pause time xuống dưới 12ms. Lazy compilation cho phép chỉ compile code thực sự được execute, cải thiện startup time. Bytecode format được tối ưu hơn để giảm bundle size. Integration với JSI được cải thiện để hoạt động hiệu quả với Kiến Trúc Mới.

Câu hỏi 5: Làm thế nào để migrate một ứng dụng hiện có sang Kiến Trúc Mới?

Migration nên được thực hiện theo từng bước. Đầu tiên, cập nhật React Native lên version hỗ trợ Kiến Trúc Mới (0.76+). Tiếp theo, audit các dependencies và cập nhật những thư viện đã hỗ trợ Kiến Trúc Mới. Sau đó, migrate từng Native Module sang TurboModules, bắt đầu với những module đơn giản nhất. Enable Fabric cho từng screen hoặc component tree một cách dần dần. Cuối cùng, bật Bridgeless mode khi tất cả các thành phần đã tương thích.

Câu hỏi 6: useTransition hoạt động như thế nào với Fabric?

useTransition cho phép đánh dấu certain state updates là non-urgent. Với Fabric, khi một transition đang pending, React có thể interrupt quá trình render để xử lý các urgent updates (như user input) trước. Khi user typing trong search box, text input được update ngay lập tức trong khi việc filter list được deferred. Điều này đảm bảo UI luôn responsive ngay cả khi xử lý expensive operations.

Kết Luận

Kiến Trúc Mới React Native đại diện cho bước tiến lớn trong phát triển ứng dụng mobile cross-platform. Những điểm quan trọng cần ghi nhớ:

• Hermes V1 mang đến bytecode pre-compilation và GC Hades với pause time cực thấp, cải thiện đáng kể startup time và runtime performance
• Fabric Renderer cho phép synchronous rendering và hỗ trợ đầy đủ concurrent features của React 18+, mở ra khả năng xây dựng UI responsive hơn
• TurboModules thay thế Native Modules cũ với lazy loading, type safety, và hiệu năng cao nhờ JSI
• JSI là nền tảng của toàn bộ Kiến Trúc Mới, cho phép giao tiếp trực tiếp và đồng bộ giữa JavaScript và native code
• Bridgeless Mode loại bỏ hoàn toàn bridge truyền thống, cải thiện startup time và giảm memory footprint
• Các benchmark cho thấy cải thiện từ 26% đến 43% cho các metrics quan trọng, với JS-to-native calls nhanh hơn 40 lần

Việc nắm vững Kiến Trúc Mới không chỉ giúp xây dựng ứng dụng hiệu quả hơn mà còn là kiến thức thiết yếu cho các buổi phỏng vấn React Native trong năm 2026 và những năm tiếp theo.