Belajar React Native - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian melihat kenapa React Native lahir. Sekarang waktunya memahami cara kerjanya di dalam. Banyak developer hanya tahu menulis komponen tanpa paham apa yang terjadi antara JavaScript dan native — sampai aplikasi mulai lemot dan tidak tahu harus menyalahkan apa.

Episode 2 membedah arsitektur React Native dari dua zaman: arsitektur lama yang berbasis Bridge, dan New Architecture dengan JSI, Fabric, serta TurboModules yang menjadi default sejak 0.76. Kalian juga akan berkenalan dengan komponen core yang akan dipakai di hampir setiap layar. Pemahaman ini menjadi fondasi untuk episode 8, 10, dan 17.

#Dua Thread Utama: JS Thread dan UI Thread

#JS Thread

Semua logika aplikasi — state, props, event handler, dan rendering tree React — berjalan di JS Thread. Di sinilah JavaScript dieksekusi. Sejak 0.76, eksekusi ini memakai Hermes, engine JavaScript yang dioptimalkan khusus untuk React Native, bukan V8 dari browser.

#UI Thread

Sementara itu, semua hal yang menyentuh layar berjalan di UI Thread: me-render UIView di iOS dan View di Android, mengelola scroll, animasi, dan interaksi sentuhan. Native modules seperti camera dan notifikasi juga berjalan di thread native ini.

Konsekuensi penting: pekerjaan berat di JS Thread tidak boleh menghalangi UI Thread, atau kalian akan melihat layar membeku. Inilah salah satu alasan mengapa animasi berbasis worklet (episode 19) berjalan lebih mulus — ia dieksekusi langsung di UI Thread.

#Dari Bridge menuju JSI

#Arsitektur Lama: Bridge

Di arsitektur lama, komunikasi antara JS Thread dan native terjadi lewat Bridge: antrian pesan asinkron yang di-serialize ke JSON. Setiap kali kalian memanggil fungsi native dari JavaScript, pesan harus "menyeberangi" bridge. Ini punya dua kelemahan besar:

• Semua panggilan asinkron — sulit membaca dan menulis data native secara sinkron.
• Serialisasi JSON menambah overhead — data besar di-encode lalu di-decode dua kali.

#New Architecture: JSI

New Architecture mengganti Bridge dengan JSI (JavaScript Interface). JSI adalah lapisan yang memungkinkan JavaScript berinteraksi langsung dengan objek native — tanpa serialisasi JSON dan tanpa hop asinkron. Panggilan native yang sinkron jadi mungkin, dan shared memory bisa dipakai bersama.

Legacy: JS --JSON--> Bridge --JSON--> Native (async, serialized)
New:    JS --JSI--> Native (direct, sync-capable)

JSI adalah kunci dari semua perbaikan performa di React Native modern. Semua library besar seperti Reanimated dan Skia membangun dukungan JSI mereka sendiri.

#Fabric dan TurboModules

#Fabric: Renderer UI Baru

Fabric adalah renderer baru React Native yang menggantikan komponen shadow tree lama. Dengan Fabric, komponen React dirender menjadi host view (native) secara lebih efisien, mendukung rendering asinkron di bawah transaksi, dan memungkinkan interop dengan sistem rendering React 19. Hasilnya: pengurangan work di UI Thread dan ukuran bundle yang lebih kecil.

#TurboModules: Native Modules Cepat

TurboModules adalah cara baru mendefinisikan dan memuat native modules. Dulu semua native modules dimuat sekaligus di startup; sekarang mereka di-load lazy — hanya ketika benar-benar dipakai. Ini mempercepat waktu startup aplikasi secara nyata.

#Komponen Core yang Dipakai Setiap Hari

Setiap aplikasi React Native dibangun dari komponen inti yang sama. Berikut yang paling sering dipakai:

• View: container dasar untuk layout, mirip div di web.
• Text: menampilkan teks — hanya Text yang boleh berisi teks.
• Image: menampilkan gambar dari URL atau aset lokal.
• ScrollView: wadah scroll untuk konten yang lebih besar dari layar.
• Pressable: tombol/touchable modern dengan feedback tekanan.
• TextInput: input teks dari pengguna.
• FlatList: list virtualisasi untuk data banyak (episode 8).

Contoh komponen sederhana yang menggabungkan beberapa komponen di atas:

Komponen core pertama

import React from "react";
import { View, Text, Pressable } from "react-native";
 
export function Card({ title, onPress }) {
  return (
    <Pressable onPress={onPress}>
      <View style={{ padding: 16, backgroundColor: "#fff" }}>
        <Text style={{ fontSize: 18, fontWeight: "bold" }}>{title}</Text>
      </View>
    </Pressable>
  );
}

Perhatikan bahwa komponen Card di atas memakai title sebagai prop dan menampilkannya di dalam Text. Styling inline dengan object literal memang valid, tapi akan kita rapikan memakai StyleSheet.create di episode 4.

#Kesimpulan Arsitektur

Ringkasan peran masing-masing bagian arsitektur:

• JS Thread: logika aplikasi, dirender tree React, dieksekusi oleh Hermes.
• UI Thread: rendering view native, scroll, animasi, dan interaksi.
• JSI: pintu komunikasi langsung JavaScript ke native tanpa Bridge.
• Fabric: renderer baru untuk host view yang efisien.
• TurboModules: native modules yang di-load lazy untuk startup lebih cepat.

Memahami lapisan ini akan sangat membantu saat kalian mengoptimalkan performa di episode 18 dan mempelajari native modules di episode 10.

#Penutup

Episode 2 menjelaskan mesin di balik React Native: dua thread yang berjalan paralel, komunikasi yang dulu lewat Bridge kini lewat JSI, renderer Fabric, dan native modules TurboModules — plus komponen core yang akan menemani kalian setiap hari.

Inti yang harus dibawa pulang:

• JS Thread mengeksekusi logika; UI Thread menggambar ke layar.
• Bridge asinkron dan berseri JSON digantikan JSI yang langsung dan bisa sinkron.
• Fabric adalah renderer baru; TurboModules memuat native modules secara lazy.
• New Architecture default sejak 0.76, dan Hermes adalah JavaScript engine bawaannya.
• View, Text, Image, ScrollView, Pressable, TextInput, dan FlatList adalah komponen core utama.
• Pilih library yang mendukung JSI untuk performa terbaik.

Di episode 3 selanjutnya kita akan membuat project React Native pertama: menjalankan npx @react-native-community/cli init MyApp, memahami struktur folder, memodifikasi App.tsx, dan meluncurkannya di emulator — termasuk perbandingan alur kerja Expo managed dan bare.