Belajar React Native - Performance & Profiling

#Pendahuluan

Aplikasi yang lemot adalah alasan nomor satu user meninggalkan aplikasi. Tapi optimasi tanpa pengukuran hanya menebak-nebak. Prinsip pertama engineering performa: ukur dulu, lalu perbaiki.

Episode 18 membahas alat profiling — React DevTools, Performance Monitor, dan profiling native — lalu teknik optimasi yang berdampak: Hermes sebagai engine default, pengurangan re-render, virtualisasi list, optimasi gambar, dan animasi Reanimated. Episode 8 sudah membahas list; episode ini melebarkannya ke seluruh aplikasi.

#Alat Profiling

#React DevTools dan Profiler

React DevTools menyediakan tab Profiler untuk merekam render dan menemukan komponen yang re-render tidak perlu. Jalankan bersama aplikasi:

npm run start

Lalu dari menu developer pilih opsi profiler, atau gunakan flag --devtools bila tersedia di versi CLI yang kalian pakai. Profiler menunjukkan durasi tiap render dan menandai komponen yang lambat.

#Performance Monitor

React Native punya Performance Monitor bawaan yang menampilkan FPS dan penggunaan memory di layar aplikasi. Aktifkan lewat developer menu: tekan m di Metro (Android) atau gunakan shortcut di menu pengembangan, lalu pilih Show Perf Monitor.

#Profiling Native

Jika masalah ada di sisi native — native modules, list, atau animasi — gunakan alat platform: Android Studio Profiler untuk CPU, memory, dan network di Android, serta Instruments untuk iOS. Keduanya menunjukkan aktivitas di UI Thread yang tidak terlihat dari JavaScript.

#Hermes dan Bundle Size

#Hermes sebagai Engine Default

Hermes adalah JavaScript engine yang dioptimalkan untuk React Native: waktu startup lebih cepat dan memory lebih kecil. Sejak 0.76 Hermes aktif secara default — pastikan kalian memanfaatkannya, bukan menonaktifkannya.

#Mengukur Ukuran Bundle

Ukuran bundle berkorelasi dengan waktu startup. Ukur perubahan tiap rilis:

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output /tmp/app.bundle
ls -lh /tmp/app.bundle

npx react-native bundle --platform android --dev false menghasilkan bundle produksi, dan ls -lh menampilkan ukurannya. Pantau tren ukuran ini untuk menangkap regresi sejak dini.

#Optimasi Render dan Re-render

#Memotong Re-render Berlebih

Re-render yang tidak perlu adalah penyebab umum frame drop. Kombinasi yang sudah dibahas di episode 5 dan 8 bekerja paling baik:

• memo membungkus komponen yang tidak berubah props-nya.
• useCallback menstabilkan referensi fungsi yang jadi props.
• useMemo meng-cache nilai kalkulasi berat.

Kombinasi memo dan useMemo

import React, { memo, useMemo } from "react";
import { Text } from "react-native";
 
const BarisItem = memo(({ item }) => <Text>{item.nama}</Text>);
 
function Daftar({ data }) {
  const itemDibutuhkan = useMemo(
    () => data.filter((item) => item.aktif),
    [data]
  );
  return itemDibutuhkan.map((item) => (
    <BarisItem key={item.id} item={item} />
  ));
}

useMemo(() => data.filter(...), [data]) menghitung filter hanya saat data berubah. Kombinasi dengan memo membuat setiap perubahan state kecil tidak mengguncang seluruh list.

#Optimasi Gambar

#Resize Sebelum Unduh

Mengunduh gambar 4000 piksel untuk ditampilkan di kotak 200 piksel membuang bandwidth dan memory. Siapkan versi gambar sesuai ukuran tampil di CDN, atau lakukan resize saat upload seperti di episode 12.

#Caching dan Format Modern

Gunakan library image yang menangani caching disk dan format efisien. expo-image cocok untuk project Expo:

npx expo install expo-image

Image dengan cache disk

import { Image } from "expo-image";
 
<Image
  source="https://cdn.example.com/photo.jpg"
  cachePolicy="memory-disk"
  recyclingKey={photoId}
  style={{ width: 200, height: 200 }}
/>

cachePolicy="memory-disk" menyimpan gambar terunduh di disk sehingga list yang di-scroll berulang tidak mengunduh lagi. recyclingKey membuat gambar lama bisa di-recycle saat list virtualisasi — mengurangi pemuatan ulang.

#Virtualisasi dan Animasi

#List dan Animasi

Episode 8 sudah membahas virtualisasi FlatList untuk ribuan item. Untuk animasi, pindahkan eksekusi ke UI Thread dengan Reanimated daripada Animated bawaan yang berjalan di JS Thread — detail lengkapnya di episode 19. Aturannya sederhana: animasi dan scroll tidak boleh diblokir oleh kerja JavaScript.

#Penutup

Episode 18 menjadikan aplikasi terasa cepat: profiling dengan React DevTools dan Performance Monitor, Hermes sebagai engine default, pengurangan re-render dengan memo, optimasi gambar, serta kombinasi virtualisasi dan animasi Reanimated.

Inti yang harus dibawa pulang:

• Ukur dengan profiler sebelum dan sesudah setiap optimasi.
• Hermes aktif secara default dan mempercepat startup.
• Pantau ukuran bundle untuk menangkap regresi.
• memo, useCallback, dan useMemo memangkas re-render.
• Gambar di-resize dan di-cache di disk sebelum ditampilkan.
• Animasi berat dijalankan di UI Thread dengan Reanimated.

Di episode 19 selanjutnya kita akan membahas animations dan Reanimated: perbandingan Animated bawaan dengan Reanimated 3+ berbasis worklet, React Native Gesture Handler, pola transisi, gesture-driven animation, dan Lottie untuk animasi kompleks.