Tujuan Pembelajaran

Memahami penyebab umum memory leak di React Native
Mampu menggunakan tool profiling untuk deteksi leak
Mengerti strategi pencegahan dan perbaikan leak

Analogi

Diagram


      Memory Leak = Keran Air Tidak Ditutup:
- Setiap render → tambah air (memory)
- Seharusnya: cleanup → tutup keran (release memory)
- Leak: keran terus mengalir → lama-lama banjir (OOM crash)

Penyebab: subscription tidak di-unsubscribe, timer tidak di-clear, closure yang hold reference.

Memory leak seperti keran yang tidak ditutup — memory terus bertambah tanpa release. Akhirnya aplikasi crash karena Out of Memory.

Penjelasan Konsep

Memory leak terjadi saat aplikasi mengalokasikan memory tapi tidak pernah melepaskannya. Di mobile, memory terbatas — iOS kill app yang pakai >1GB, Android mirip.

Common causes: (1) Subscription tidak di-unsubscribe — useEffect tanpa cleanup function. (2) Timer/interval tidak di-clear. (3) Event listener tidak di-remove. (4) Closure menahan reference ke object besar. (5) Module-level state yang terus bertambah. (6) Image cache tidak di-clear.

Detection tools: (1) Xcode Memory Graph — visualisasi object graph, deteksi leak. (2) Xcode Allocations Instrument — track memory allocation real-time. (3) Android Studio Memory Profiler — heap dump, allocation tracking. (4) Flipper Leak Canary plugin. (5) performance.memory API untuk JS heap size.

Fix patterns: (1) Every useEffect with subscribe/addListener/watch → HARUS return cleanup. (2) Every setInterval → clearInterval di cleanup. (3) Module-level caches → maksimum size + LRU eviction. (4) Large objects → set ke null setelah tidak digunakan.

Image memory: gambar adalah penyebab #1 memory masalah. (1) Gunakan react-native-fast-image yang punya cache management. (2) Resize gambar sebelum render (jangan render 4000x3000 di thumbnail 100x100). (3) Clear image cache secara periodik.

Monitoring in production: (1) Track JS heap size via performance.memory.usedJSHeapSize. (2) Kirim ke analytics — detect tren meningkat. (3) Alert kalau heap > threshold. (4) Force reload kalau mendekati limit.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami penyebab umum memory leak di React Native., mampu menggunakan tool profiling untuk deteksi leak., dan mengerti strategi pencegahan dan perbaikan leak. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Memory Profiling & Leak Detection, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Memory leak seperti keran yang tidak ditutup — memory terus bertambah tanpa release. Akhirnya aplikasi crash karena Out of Memory. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Setiap subscription di useEffect HARUS punya cleanup. Timer, listener, observer — semua harus di-unsubscribe saat component unmount.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

useEffect(() => {
  const subscription = eventEmitter.addListener("update", handler);
  const timer = setInterval(tick, 1000);
  // CLEANUP — ini WAJIB
  return () => {
    subscription.remove();
    clearInterval(timer);
  };
}, []);

Penjelasan Kode

Setiap subscription di useEffect HARUS punya cleanup. Timer, listener, observer — semua harus di-unsubscribe saat component unmount.

Prompt AI

Audit kode React Native ini untuk potensi memory leak: (a) global event bus tanpa unsubscribe, (b) FlatList renderItem yang bikin closure baru setiap render, (c) image cache tanpa size limit, (d) WebSocket connection tanpa reconnect logic. Berikan fix untuk masing-masing.

Pertanyaan Reflektif

Cek aplikasi-mu dengan memory profiler. Apakah ada memory leak? Seberapa besar dampaknya?