Fabric di React Native — apa itu, arsitektur rendering dan cara kerjanya

Apa itu Fabric?

Fabric — adalah sistem rendering baru untuk React Native yang menggantikan renderer lama yang bekerja melalui Shadow Thread dan Bridge. Dalam arsitektur lama, proses rendering mencakup tiga langkah: JavaScript menghitung Virtual DOM, Shadow Thread (Yoga) menghitung tata letak, Native Thread merender UIView. Fabric menggabungkan semua langkah ini dalam satu pipa C++ yang bekerja secara sinkron.

Pengembangan Fabric dimulai pada tahun 2019 sebagai bagian dari inisiatif Lean Core dan proyek “Arsitektur Baru”. Tujuan utamanya adalah menyelesaikan masalah kinerja yang terkait dengan rendering tiga fase asinkron. Dalam arsitektur lama, setiap perubahan status memerlukan tiga kali lintasan melalui thread yang berbeda, yang menyebabkan penundaan antara perubahan data dan rendering UI.

Fabric didasarkan pada konsep pohon bayangan yang tidak dapat diubah (Immutable Shadow Tree). Setiap node pohon mewakili komponen React dengan props dan statusnya. Saat status berubah, pohon baru dibuat, dan Fabric menghitung perbedaan antara pohon lama dan baru dan hanya menerapkan perubahan yang diperlukan ke UI asli. Ini meminimalkan jumlah operasi dengan UIView/ViewGroup dan mengurangi waktu rendering.

Bagaimana Shadow Tree Bekerja

Shadow Tree — adalah dasar kerja Fabric. Tidak seperti arsitektur lama, di mana Shadow Tree hanya ada di sisi C++ dan dipisahkan dari pohon JS melalui Bridge asinkron, Fabric membuat representasi hierarkis UI yang sepenuhnya tersinkronisasi. Node Shadow Tree menyimpan props, status, dan gaya komponen, dan Yoga menghitung tata letak langsung di tingkat C++.

Ketika komponen React memperbarui statusnya, React Native mengirimkan Shadow Node baru ke Fabric. Fabric tidak merender ulang seluruh UI — ia menggunakan algoritma perbandingan (diffing) di tingkat C++ untuk menentukan node mana yang berubah. Hanya node yang dimodifikasi yang dikirim ke rendering asli, yang secara signifikan mengurangi volume pekerjaan.

Rendering Tiga Fase Fabric

Proses rendering di Fabric terdiri dari tiga fase yang dijalankan secara sinkron di tingkat C++ tanpa peralihan thread. Fase pertama — Render: React memanggil fungsi rendering komponen, yang mengembalikan React Element Tree. Fase kedua — Commit: React Native membuat Shadow Tree baru dan menghitung perubahan berdasarkan versi lama. Fase ketiga — Mount: Fabric menerapkan perubahan ke UI asli, membuat, memperbarui, atau menghapus UIView.

• Render — dijalankan di thread JS, membuat React Element Tree.
• Commit — Shadow Tree C++ menghitung diff dan membentuk daftar mutasi.
• Mount — mutasi diterapkan ke UI asli di thread utama.

Ketiga fase bekerja sebagai satu pipa, di mana data ditransmisikan melalui JSI tanpa serialisasi. Ini adalah perbedaan utama dari arsitektur lama, di mana ada jeda antar fase: JS → (JSON) → Shadow Thread → (tata letak) → Native Thread.

Fabric vs Renderer Lama: Perbandingan

Perbandingan Fabric dengan renderer lama menunjukkan betapa signifikannya arsitektur React Native telah berubah. Renderer lama bekerja secara asinkron, membagi proses rendering menjadi tiga thread independen. Fabric menggabungkan semuanya dalam satu pipa C++.

Dalam praktiknya, Fabric sangat menguntungkan untuk aplikasi dengan pembaruan UI yang sering: animasi, scroll dengan header mengambang, data real-time. Untuk halaman statis (teks, tombol) perbedaannya kurang terlihat. Menurut tolok ukur Meta, Fabric mengurangi waktu rendering pemuatan awal daftar sebesar 40–60%.

JSI dan Fabric: Komunikasi Baru

JSI (JavaScript Interface) — adalah komponen kunci yang memungkinkan Fabric. Melalui JSI, Fabric mendapatkan akses langsung ke nilai JavaScript tanpa serialisasi. Ketika React mentransmisikan props ke Fabric, mereka tidak disalin melalui JSON — JSI mentransmisikan pointer ke data di memori mesin JS.

Arsitektur JSI memungkinkan Fabric bekerja dengan mesin JavaScript apa pun — Hermes, JSC, atau V8. Kode C++ Fabric tidak bergantung pada implementasi spesifik mesin JS, yang menyederhanakan pemeliharaan dan pengujian. Semua operasi dengan UI — membuat, memperbarui, menghapus — dilakukan melalui JSI, yang menjamin penundaan minimal.

// Pipa rendering C++ Fabric melalui JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Transfer properti sinkron melalui JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Perhitungan tata letak langsung melalui Yoga
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Terapkan mutasi ke UI asli
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

Keuntungan utama — pembaruan sinkron. Dalam arsitektur lama, UI diperbarui melalui antrian asinkron: React mengirimkan perintah melalui Bridge, Shadow Thread memproses tata letak, Native Thread merender. Di Fabric, semua langkah dijalankan secara berurutan dalam satu lintasan. Ini menghilangkan race condition dan menjamin bahwa UI sesuai dengan status aplikasi saat ini.

Migrasi ke Fabric

Migrasi ke Fabric tidak memerlukan penulisan ulang komponen React — semua komponen React Native yang ada tetap berfungsi. Namun, pustaka dengan kode asli (Native Module, ViewManager kustom) mungkin memerlukan pembaruan. Meta merekomendasikan untuk memeriksa kompatibilitas setiap pustaka sebelum mengaktifkan arsitektur baru.

Untuk mengaktifkan Fabric di proyek React Native 0.76+, atur flag newArchEnabled: true di react-native.config.js. Fabric akan aktif secara otomatis bersama dengan Turbo Module. Jika terjadi masalah, Fabric dapat dinonaktifkan dengan kembali ke renderer lama tanpa mengubah kode aplikasi — kedua arsitektur didukung secara paralel.

// package.json — periksa pustaka yang kompatibel dengan Fabric
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

Saat migrasi, penting untuk memperbarui semua pustaka asli ke versi yang kompatibel dengan Fabric. Pustaka besar seperti react-native-reanimated dan react-native-gesture-handler sudah mendukung arsitektur baru. Untuk pustaka yang belum diperbarui, Fabric menyediakan mekanisme kompatibilitas — jika pustaka tidak mendukung Fabric, renderer secara otomatis beralih ke yang lama untuk pustaka tersebut.