Tujuan Pembelajaran

Memahami lifecycle dengan hooks
Bisa membuat custom hook

Analogi

Diagram


      Class Component = Mesin dengan banyak tombol (kompleks)
Hooks = Remote control sederhana — setiap tombol punya 1 fungsi

Hooks memungkinkan functional component punya state dan lifecycle

Penjelasan Konsep

Hooks

Hooks adalah fungsi yang memungkinkan functional component menggunakan state, ref, context, dan sinkronisasi dengan sistem luar. Hooks diprefix dengan use.

Hooks Built-in

useState — State lokal component.
useEffect — Sinkronisasi dengan sistem luar: subscription, timer, DOM API, atau request yang memang tidak ditangani framework/data library.
useRef — Referensi mutable yang tidak memicu re-render. Berguna untuk DOM reference dan menyimpan nilai previous.
useContext — Akses React context tanpa Consumer wrapper.
useMemo dan useCallback — Escape hatch untuk memoization ketika ada bottleneck yang nyata.

Rules of Hooks

Hanya panggil hooks di top level (bukan di dalam loop/condition).
Hanya panggil hooks dari React functions (component atau custom hooks).

Custom Hooks

Ekstrak logic reusable ke fungsi hooks sendiri. Nama harus diawali use.

Catatan modern: jangan memakai useEffect untuk semua turunan state. Kalau nilai bisa dihitung dari props/state saat render, hitung langsung. Effects dipakai saat React perlu sinkron dengan sesuatu di luar React.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami lifecycle dengan hooks., dan bisa membuat custom hook. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

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

Cara Membayangkannya

Hooks memungkinkan functional component punya state dan lifecycle. 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. useEffect untuk side effects. useRef untuk DOM reference. Custom hook ekstrak logic.

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 — sinkronisasi dengan sistem luar
import { useEffect, useRef, useState } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return <p>Width: {width}px</p>;
}

// USEREF — DOM REFERENCE
function TextInput() {
  const inputRef = useRef(null);
  
  const focus = () => inputRef.current.focus();
  
  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type here" />
      <button onClick={focus}>Focus Input</button>
    </div>
  );
}

// CUSTOM HOOK
function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

Penjelasan Kode

useEffect untuk side effects. useRef untuk DOM reference. Custom hook ekstrak logic.

Prompt AI

Jelaskan rules of hooks dan kenapa penting.

Pertanyaan Reflektif

Ambil satu `useEffect` di proyekmu. Apakah ia benar-benar sinkronisasi dengan sistem luar, atau bisa dihitung langsung saat render?