React Essentials Component Lifecycle

Project React sederhana untuk memahami Context API dan useEffect lifecycle (mount, update, unmount) serta memory leak.

---

Cara Menjalankan

npm install
npm run dev

Buka http://localhost:5173 di browser.

---

Panduan untuk Instruktur

1. Local State (Sebelum Context API)

Tujuan: Memahami bahwa state secara default adalah lokal pada setiap component.

Demo: Component ThemeToggle menggunakan useState langsung.

Penjelasan:

• State theme awalnya disimpan secara lokal
• Setiap component memiliki state-nya sendiri
• Sulit untuk berbagi state antar component

Pertanyaan untuk peserta:

• "Bagaimana jika ada 100 component yang butuh akses ke theme yang sama?"

---

2. Mount Demo

Tujuan: Memahami fase mount saat component pertama kali muncul di DOM.

Demo: Component MountDemo dengan useEffect kosong [].

Penjelasan:

useEffect(() => {
  console.log('🔹 MOUNT')
  return () => console.log('🔹 UNMOUNT')
}, [])

• Array dependency kosong [] = efek hanya jalan sekali saat mount
• Cleanup function jalan saat unmount

Tips:

• Tunjukkan console log saat component mount
• Gunakan setTimeout di dalam effect untuk simulasi:

  useEffect(() => {
    console.log('Component mounted!')
    const timer = setTimeout(() => {
      console.log('Timer selesai!')
    }, 2000)
    return () => clearTimeout(timer)
  }, [])

---

3. Update Demo

Tujuan: Memahami fase update saat state/props berubah.

Demo: Component UpdateDemo menggunakan Context API untuk theme.

Penjelasan:

useEffect(() => {
  console.log('🔄 UPDATE:', theme)
  setCount(c => c + 1)
}, [theme])

• Dependency theme = efek jalan setiap kali theme berubah
• Context API memungkinkan state global diakses dimana saja

Penjelasan untuk peserta:

• Context API memecah masalah "prop drilling"
• Tidak perlu mengirim props ke component child yang tidak butuh

---

4. Unmount Demo

Tujuan: Memahami fase unmount saat component dihapus dari DOM.

Demo: Component UnmountDemo dengan cleanup function.

Penjelasan:

useEffect(() => {
  console.log('🔸 MOUNT')
  return () => console.log('🔸 UNMOUNT - cleanup!')
}, [])

• Cleanup function berjalan saat component dihapus
• Sangat penting untuk membersihkan subscription/timer

Aksi untuk peserta:

1. Klik "Show" → component mount (lihat console)
2. Klik "Hide" → component unmount (lihat console)

---

5. Memory Leak (PENTING!)

Tujuan: Memahami apa itu memory leak dan cara mengatasinya.

Demo: Component MemoryLeakDemo dengan setInterval tanpa cleanup.

5.1 Memory Leak Terjadi

Masalah:

useEffect(() => {
  console.log('🔴 MOUNT')
  const interval = setInterval(() => {
    setCount(c => c + 1)
  }, 500)
  // ❌ Cleanup DIKOMENTAR - ini cause memory leak!
}, [setCount])

Yang Terjadi:

1. Klik "Show" → interval dimulai, count meningkat
2. Klik "Hide" → component di-unmount
3. Interval tetap berjalan di background ❌
4. Setiap 500ms, interval mencoba setCount pada component yang sudah tidak ada
5. React mengeluarkan warning: "Can't perform a React state update on an unmounted component"

Verifikasi:

• Buka browser console
• Klik "Hide"
• Tunggu beberapa detik
• Lihat warning dari React

5.2 Memory Leak Teratasi

Solusi: Uncomment cleanup function:

useEffect(() => {
  console.log('🔴 MOUNT')
  const interval = setInterval(() => {
    setCount(c => c + 1)
  }, 500)
  
  // ✅ Cleanup - WAJIB untuk mencegah memory leak!
  return () => {
    console.log('🟢 cleanup - clearing interval')
    clearInterval(interval)
  }
}, [setCount])

Hasil:

• Saat component unmount, cleanup berjalan
• clearInterval(interval) menghentikan timer
• Tidak ada memory leak ✅

Konsep Inti:

• return () => {...} di dalam useEffect = cleanup function
• Cleanup jalan saat component unmount ATAU sebelum effect kedua berjalan
• SELALU bersihkan: subscriptions, event listeners, timers

---

Checklist Instruktur

No	Materi	Status
1	Local State vs Global State (Context API)	☐
2	Mount Phase: component muncul di DOM	☐
3	Mount dengan setTimeout simulation	☐
4	Update Phase: state/props berubah	☐
5	Context API untuk theme global	☐
6	Unmount Phase: component dihapus dari DOM	☐
7	Cleanup function saat unmount	☐
8	Memory Leak: setInterval tanpa cleanup	☐
9	Memory Leak: dengan cleanup (solusi)	☐

---

Struktur File

src/
├── App.jsx                    # Main component dengan ThemeProvider
├── App.css                   # Styling brutalist (B&W only)
├── context/
│   └── ThemeContext.jsx      # Context API untuk theme
└── components/
    ├── ThemeToggle.jsx       # Button toggle theme
    ├── LifecycleDemo.jsx     # Container untuk demo
    ├── MountDemo.jsx         # Demo mount phase
    ├── UpdateDemo.jsx        # Demo update phase
    ├── UnmountDemo.jsx       # Demo unmount phase
    └── MemoryLeakDemo.jsx    # Demo memory leak

---

Teknologi

• React 19 dengan Hooks
• Vite sebagai build tool
• Context API untuk state management
• useEffect untuk lifecycle management