The world is yours

Mastering React Hooks

Pelajari cara mengelola state dan side effects secara efisien menggunakan React Hooks terbaru

Enroll Back

Ringkasan Program Pelatihan

Tujuan Pelatihan

Pelatihan ini dirancang untuk membekali peserta dengan pemahaman mendalam dan keterampilan praktis dalam mengelola state dan side effects di dalam aplikasi React secara efisien dan modern menggunakan React Hooks. Peserta akan belajar untuk meninggalkan pola kelas (class components) dan beralih sepenuhnya ke fungsi dengan Hooks, sehingga menghasilkan kode yang lebih bersih, modular, dan mudah diuji.

Target Peserta

  • Frontend Developer yang sudah memiliki dasar React (class atau functional components).
  • Full-Stack Developer yang ingin memperdalam pengembangan UI modern dengan React.
  • Tech Lead atau Software Architect yang perlu memahami best practice state management terkini.
  • Mahasiswa atau individu yang telah menyelesaikan kursus dasar React dan ingin naik level.

Modul-Modul Standar yang Akan Dibahas

  1. Fundamental Hooks: useState, useEffect, useContext.
  2. Hooks Tambahan: useReducer, useCallback, useMemo, useRef.
  3. Custom Hooks: Prinsip pembuatan dan contoh implementasi untuk logika yang dapat digunakan kembali (reusable logic).
  4. Manajemen State Kompleks: Pola untuk state yang melibatkan banyak komponen dan hubungan data.
  5. Optimasi Performa: Teknik mencegah render berlebihan (unnecessary re-renders) dengan Hooks.
  6. Testing Komponen dengan Hooks: Pengenalan pengujian komponen fungsi yang menggunakan Hooks.

Materi Tambahan (Opsional/Lanjutan)

  • Integrasi Hooks dengan pustaka state management eksternal (Zustand, Jotai).
  • Patterns untuk Data Fetching (TanStack Query / React Query) dengan Hooks.
  • Hooks dalam React Server Components (RSC) - Konsep Dasar.
  • Debugging dan Tooling Development untuk Hooks.

Metode Pelatihan

Pelatihan akan dilaksanakan dengan pendekatan hands-on workshop yang interaktif, mencakup:

  • Sesi Teori & Demo Langsung: Penyampaian konsep diikuti dengan contoh kode langsung oleh instruktur.
  • Latihan Terpandu (Guided Coding): Peserta mengikuti instruktur dalam membangun fitur atau komponen.
  • Proyek Mini Individu/Kelompok: Menerapkan seluruh konsep Hooks untuk membangun sebuah aplikasi kecil yang fungsional.
  • Code Review & Diskusi: Sesi tanya jawab, solusi masalah bersama, dan review kode untuk memperkuat pemahaman.
  • Penggunaan lingkungan development yang sudah disiapkan (VS Code, StackBlitz, atau CodeSandbox).

Hasil yang Diharapkan

Setelah menyelesaikan pelatihan ini, peserta diharapkan mampu:

  • Mengembangkan aplikasi React modern sepenuhnya menggunakan Functional Components dan Hooks.
  • Merancang dan mengelola state logika aplikasi, baik sederhana maupun kompleks, dengan pola Hooks yang tepat.
  • Mengontrol side effects seperti fetching data, subscriptions, dan DOM manipulations dengan efektif menggunakan useEffect dan Custom Hooks.
  • Mengoptimalkan performa aplikasi dengan memanfaatkan useMemo, useCallback, dan React.memo.
  • Membuat Custom Hooks untuk enkapsulasi dan penggunaan kembali logika bisnis.
  • Memiliki dasar yang kuat untuk mempelajari pustaka atau pola React lanjutan yang dibangun di atas konsep Hooks.

Enroll Back

What you will learn?

Pendahuluan React Hooks

  • 1. Mengapa Hooks Diperkenalkan?

  • 2. Aturan Dasar Penggunaan Hooks

  • 3. Perbandingan: Class Component vs Functional Component dengan Hooks

  • 4. Persiapan Lingkungan Pengembangan

Dasar-dasar useState

  • 1. Deklarasi State dengan useState

  • 2. Inisialisasi State Awal

  • 3. Memperbarui State: Setter Function

  • 4. State dengan Tipe Data Objek dan Array

  • 5. Best Practices Penggunaan useState

useEffect untuk Side Effects

  • 1. Konsep Side Effects dalam React

  • 2. Struktur Dasar useEffect

  • 3. Dependency Array: Kosong, Berisi, dan Tanpa Array

  • 4. Cleanup Function dengan useEffect

  • 5. Contoh Implementasi: Data Fetching, Event Listeners, dan Subscriptions

Custom Hooks

  • 1. Konsep dan Manfaat Custom Hooks

  • 2. Aturan Penamaan Custom Hooks

  • 3. Membuat Custom Hook Pertama

  • 4. Custom Hook untuk Form Handling

  • 5. Custom Hook untuk API Calls

  • 6. Berbagi Logic antar Komponen dengan Custom Hooks

useReducer untuk State Kompleks

  • 1. Konsep Reducer Pattern

  • 2. Perbandingan useState vs useReducer

  • 3. Implementasi useReducer Dasar

  • 4. Complex State Management dengan useReducer

  • 5. Integrasi dengan Context API

Context API dengan useContext

  • 1. Masalah Prop Drilling

  • 2. Membuat Context dengan createContext

  • 3. Mengonsumsi Context dengan useContext

  • 4. Dynamic Context Values

  • 5. Optimasi Performa Context

Hooks Referensi: useRef dan useImperativeHandle

  • 1. Mengakses DOM Elements dengan useRef

  • 2. useRef untuk Mutable Values

  • 3. Forwarding Refs dengan React.forwardRef

  • 4. Customizing Ref Exposure dengan useImperativeHandle

  • 5. Contoh Kasus: Fokus Input dan Animasi

Hooks Optimasi: useMemo dan useCallback

  • 1. Konsep Memoization dalam React

  • 2. Optimasi Perhitungan Berat dengan useMemo

  • 3. Mencegah Re-creation Functions dengan useCallback

  • 4. Kapan Harus Menggunakan useMemo dan useCallback

  • 5. Common Pitfalls dan Best Practices

Hooks Tambahan dan Eksperimental

  • 1. useLayoutEffect untuk Synchronous Updates

  • 2. useDebugValue untuk Custom Hook Development

  • 3. useDeferredValue untuk Optimasi Render

  • 4. useTransition untuk Non-Blocking UI

  • 5. useId untuk Unique Identifier Generation

Testing Komponen dengan Hooks

  • 1. Strategi Testing React Hooks

  • 2. Testing Custom Hooks

  • 3. Mocking Hooks dalam Testing

  • 4. Testing Asynchronous Effects

  • 5. Best Practices Testing dengan React Testing Library

Pattern dan Best Practices Lanjutan

  • 1. Compound Components dengan Hooks

  • 2. State Management Patterns

  • 3. Error Handling dengan Error Boundaries dan Hooks

  • 4. Optimasi Performa Aplikasi Berskala Besar

  • 5. Migrasi dari Class Components ke Hooks

Studi Kasus: Aplikasi Real-World

  • 1. Membangun Todo App dengan Hooks Lengkap

  • 2. Implementasi Authentication Flow

  • 3. State Management Global dengan Context + useReducer

  • 4. Integrasi dengan External APIs

  • 5. Optimasi dan Deployment

Enroll Back