Tujuan Pembelajaran

Memahami konsep state management
Bisa memilih library state management yang tepat

Analogi

Diagram


      State = Lemari Bersama di Kantor:

Tanpa State Management:
[Meja A] Punya data X versi 1
[Meja B] Punya data X versi 2 (beda!)

Dengan State Management:
[Lemari Pusat] → Data X versi tunggal
  ↓         ↓
[Meja A]  [Meja B] (sama!)

State management seperti lemari pusat — satu sumber kebenaran

Penjelasan Konsep

State

State adalah data yang mengendalikan tampilan dan perilaku aplikasi.

State Management

State Management adalah cara mengelola data tersebut agar konsisten di seluruh aplikasi.

Kenapa butuh state management?

Tanpa state management:

Meja A punya data X versi 1
Meja B punya data X versi 2 (berbeda!)

Dengan state management:

Satu lemari pusat berisi data X
Semua meja mengambil dari lemari yang sama

Pilihan State Management

React Context

Bawaan React,

Cocok untuk data yang jarang berubah.

✅ Tidak perlu library tambahan
❌ Re-render berlebihan kalau data sering berubah

Redux

Library paling populer, predictable state container.

✅ DevTools bagus, ecosystem besar
❌ Boilerplate banyak

Zustand

Lightweight alternative, minimal boilerplate.

✅ Simple, performa bagus
❌ Ecosystem lebih kecil

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep state management., dan bisa memilih library state management yang tepat. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca State Management, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

State management seperti lemari pusat — satu sumber kebenaran. 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 javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 1-9: React Context. Baris 11-16: Redux store. Baris 18-28: Zustand — minimal dan clean.

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 sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

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

javascript

// REACT CONTEXT
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// REDUX
const store = configureStore({
  reducer: {
    user: userSlice.reducer,
    cart: cartSlice.reducer
  }
});

// ZUSTAND
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

Penjelasan Kode

Baris 1-9: React Context. Baris 11-16: Redux store. Baris 18-28: Zustand — minimal dan clean.

Prompt AI

Jelaskan kapan menggunakan Context vs Redux vs Zustand.

Pertanyaan Reflektif

Proyekmu butuh state management? Coba Zustand — paling simple untuk pemula.