React Native New Architecture: Mendalami TurboModules dan Fabric Renderer

Masalah Utama The Old Bridge di React Native

Pada arsitektur lama React Native, setiap kali kode JavaScript ingin berkomunikasi dengan platform native (Android Java/Kotlin atau iOS Swift/Obj-C), data harus diserialisasi ke dalam format JSON, dikirim melalui antrean Bridge secara asinkron, dan dide-serialisasi kembali.

Ketika pengguna melakukan scroll cepat pada daftar ribuan item atau animasi interaktif, Bridge mengalami bottleneck, menyebabkan frame drop dan tampilan putih sejenak (white blink).

flowchart LR
    OldJS["JavaScript Realm"] -- "Async JSON Bridge (Lambat)" --> OldNative["Native Platform UI"]
    NewJS["JavaScript Realm"] <-- "Direct Memory Access via JSI (C++)" --> NewNative["Native Platform UI"]

Solusi New Architecture: JSI (JavaScript Interface)

Dengan JSI, JavaScript dapat memegang referensi memori langsung ke objek C++ native tanpa serialisasi string JSON!

1. Fabric Renderer: Sistem rendering UI baru yang mendukung synchronous layout calculation, menghilangkan bug layout jumping.
2. TurboModules: Modul native kini dimuat secara lazy (hanya saat dibutuhkan), memangkas waktu startup aplikasi (cold boot) hingga 40%.