Belajar React Native - New Architecture Deep Dive

#Pendahuluan

Di episode 2 kalian berkenalan dengan New Architecture dari jauh. Sekarang saatnya membedahnya: apa yang sebenarnya terjadi saat komponen React dirender, kenapa panggilan native bisa jadi sinkron, dan bagaimana ekosistem library beradaptasi.

Episode 17 menggali Fabric dan JSI secara mendalam, interop layer yang menjaga library lama tetap hidup, TurboModules, lalu strategi migrasi — kapan mengaktifkan New Architecture dan bagaimana memastikan library pendukung siap. Sejak 0.76 ini sudah default, tapi memahami lapisannya tetap penting saat menghadapi isu performa.

#Fabric: Renderer Asinkron

#Dari Shadow Tree menuju Host View

Saat komponen React dirender, React menghasilkan deskripsi UI. Fabric mengambil deskripsi itu dan mengubahnya menjadi host view native — UIView di iOS dan View di Android — melalui beberapa tahap:

React element -> React tree -> shadow tree -> host view native

#Commit Atomik dan Asinkron

Fabric memperkenalkan konsep commit yang atomik: perubahan UI dikelompokkan dan diterapkan sekaligus, sehingga tidak ada separuh layar yang tampil dengan state campuran. Kerja berat bisa dipindah dari UI Thread, dan sinkronisasi dengan sistem rendering React 19 menjadi mungkin.

#Manfaat Konkret

Fabric membawa pengurangan kerja di UI Thread, waktu startup yang lebih cepat, dan dukungan fitur yang sebelumnya sulit, seperti interop dengan library yang memakai rendering sendiri. Bagi developer aplikasi, dampaknya terasa pada scroll dan animasi yang lebih stabil.

#JSI: Panggilan Native Sinkron

#Menggantikan Serialisasi Bridge

Bridge lama melewati serialisasi JSON dan komunikasi asinkron. JSI (JavaScript Interface) menghubungkan JavaScript langsung dengan objek native — JavaScript bisa memegang referensi objek native dan memanggil metodenya tanpa melalui pesan yang di-serialize.

#Kapan Sinkron Membantu

Dengan JSI, library seperti Reanimated bisa mengeksekusi animasi langsung di UI Thread, dan MMKV bisa baca-tulis storage secara sinkron dari JavaScript. Bagi aplikasi kalian, panggilan native yang lambat di arsitektur lama bisa jadi instan.

Contoh panggilan native modern

import { MMKV } from "react-native-mmkv";
 
const storage = new MMKV();
storage.set("kunci", "nilai"); // sinkron, tanpa serialisasi
const nilai = storage.getString("kunci");

Perhatikan storage.set("kunci", "nilai") yang sinkron — hasil langsung tersedia tanpa promise atau antrian bridge. Inilah perbedaan nyata yang dirasakan developer.

#Interop Layer untuk Library Lama

#Menjembatani Dua Zaman

Ekosistem punya ribuan library yang ditulis untuk bridge lama. Interop layer di New Architecture mengadaptasi module lama secara otomatis, sehingga aplikasi bisa mengaktifkan New Architecture tanpa menunggu semua library ditulis ulang.

#Biaya Interop

Interop menjaga kompatibilitas, tapi kinerjanya tetap seperti bridge: ada serialisasi dan batasan asinkron. Library yang memakai JSI langsung tetap lebih cepat. Cek status dukungan setiap library sebelum migrasi — episode 21 menunjukkan cara memeriksanya di reactnative.directory.

#TurboModules dan Lazy Loading

#Memuat Hanya yang Dipakai

TurboModules mengubah cara native modules dimuat: dari semuanya-sekaligus-saat-startup menjadi lazy — hanya dimuat ketika dipanggil. Ini memangkas waktu startup secara nyata, terutama pada aplikasi dengan banyak native modules.

#Interop dan TurboModules

TurboModules yang ditulis asli memakai JSI dan dapat dipanggil sinkron. Module lama diadaptasi lewat interop dan tetap berjalan. Saat memilih library, preferensi untuk kinerja: library TurboModules asli lebih baik daripada module lama yang di-interop.

#Strategi Migrasi

#Audit Library Terlebih Dahulu

Sebelum mengaktifkan New Architecture, audit seluruh dependency:

reactnative.directory/library/<nama-library>

Periksa dukungan New Architecture, versi minimum React Native, dan adanya isu terbuka di repository. Library yang belum mendukung bisa memakai interop, tapi validasi dengan uji menyeluruh.

#Aktifkan Secara Bertahap

Sejak 0.76 New Architecture aktif secara default, jadi untuk project baru tidak ada langkah ekstra. Untuk project lama yang masih di arsitektur lama, aktifkan lewat flag konfigurasi:

newArchEnabled=true

Setelah diaktifkan, jalankan seluruh rangkaian test, uji library native satu per satu, dan pantau metrik startup serta stabilitas sebelum rilis penuh.

#Penutup

Episode 17 membedah New Architecture: Fabric sebagai renderer asinkron dengan commit atomik, JSI yang memungkinkan panggilan native sinkron, interop layer untuk library lama, TurboModules dengan lazy loading, dan strategi migrasi yang aman.

Inti yang harus dibawa pulang:

• Fabric merender host view melalui shadow tree dengan commit atomik.
• JSI menghubungkan JavaScript langsung ke native tanpa serialisasi.
• Interop layer menjaga library lama tetap jalan, tapi lebih lambat dari JSI.
• TurboModules memuat native modules secara lazy untuk startup cepat.
• Audit semua library sebelum mengaktifkan New Architecture.
• Uji menyeluruh dan sediakan rollback saat migrasi.

Di episode 18 selanjutnya kita akan membahas performance dan profiling: React DevTools, Performance Monitor, dan profiling native, lalu optimasi dengan Hermes, pengurangan re-render, virtualisasi list, dan animasi Reanimated.