React Academy · Pelajaran

Memfaktorkan Ulang HOC menjadi Hook Kustom

Ubah HOC withAuth menjadi hook useAuth langkah demi langkah.

Memfaktorkan Ulang HOC menjadi Hook Kustom adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan merefactor HOC withAuth menjadi hook kustom useAuth langkah demi langkah, serta melihat dengan tepat alasan versi hook lebih rapi dan lebih mudah diuji.

HOC withAuth (Titik Awal)

HOC menerima komponen, memeriksa apakah pengguna telah terautentikasi, lalu mengarahkannya ke /login jika belum. HOC menyisipkan pengguna sebagai prop.

function withAuth(Component) {
  return function AuthGuard(props) {
    const { user, loading } = useAuthState();
    if (loading) return <Spinner />;
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} user={user} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Masalah pada HOC

HOC: (1) menambahkan pembungkus di DevTools, (2) secara implisit menyisipkan prop `user`—komponen harus mengetahui bahwa prop tersebut diharapkan, (3) sulit diuji tanpa merender seluruh pembungkus HOC, (4) tidak mudah digabungkan dengan hook lain.

Langkah 1: Ekstrak Logika ke dalam Hook

Pindahkan semua logika dari HOC ke dalam hook kustom. Hook tersebut mengembalikan keadaan autentikasi secara langsung—tanpa pembungkus dan tanpa penyisipan prop.

function useAuth() {
  const { user, loading } = useAuthState();
  return { user, loading, isAuthenticated: !!user };
}

Langkah 2: Tangani Pengalihan dalam Hook

Pindahkan logika pengalihan ke dalam hook terpisah (misalnya useRequireAuth) yang memanggil navigate secara internal dan mengembalikan pengguna.

function useRequireAuth(redirectTo = '/login') {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate(redirectTo);
  }, [user, loading, navigate, redirectTo]);

  return { user, loading };
}

Langkah 3: Perbarui Komponen

Ganti pembungkus HOC dengan pemanggilan hook secara langsung di dalam komponen. Komponen secara eksplisit memanggil useRequireAuth dan menangani pemuatan. Dependensinya kini terlihat jelas.

function MyPage() {
  const { user, loading } = useRequireAuth();
  if (loading) return <Spinner />;
  return <p>Hello, {user.name}</p>;
}

Perbandingan Manfaat

Versi hook: (1) tidak memiliki pembungkus tambahan di DevTools, (2) dependensi eksplisit—Anda dapat melihat `useRequireAuth` di dalam komponen, (3) dapat diuji dengan meniru hook, (4) dapat digabungkan dengan hook lain dalam komponen yang sama.

Menguji Versi Hook

Tirukan useRequireAuth dalam pengujian dengan mengganti ekspor modulnya. Pengujian komponen hanya perlu merender komponen dan memeriksa keluarannya—tidak diperlukan penyiapan HOC.

vi.mock('./useRequireAuth', () => ({
  useRequireAuth: () => ({ user: mockUser, loading: false })
}));

render(<MyPage />);
expect(screen.getByText('Hello, Alice')).toBeInTheDocument();

Kapan HOC Tetap Dipertahankan

Pertahankan HOC jika Anda perlu melindungi banyak komponen secara deklaratif (misalnya dalam definisi rute) dan tidak ingin menambahkan pemanggilan hook ke setiap komponen. Anda bahkan dapat membangun HOC ON TOP dari hook tersebut.

function withAuth(Component) {
  return function (props) {
    const { user, loading } = useRequireAuth();
    if (loading) return <Spinner />;
    return <Component {...props} user={user} />;
  };
}

Kelebihan Keduanya

Arsitektur akhirnya: hook useRequireAuth untuk digunakan secara langsung dalam komponen, AND HOC withAuth tipis yang dibangun di atasnya untuk perlindungan rute deklaratif. Keduanya berbagi logika hook yang sama.

Pemeriksaan Singkat

Apa manfaat utama memanggil useRequireAuth di dalam komponen dibandingkan membungkusnya dengan HOC withAuth?

Ringkasan

Refactor HOC menjadi hook dengan mengekstrak logika ke dalam hook kustom, memindahkan efek samping (seperti pengalihan) ke dalam hook, lalu memanggil hook secara langsung di dalam komponen. Bangun HOC tipis di atas hook jika pembungkusan deklaratif diperlukan.

Kursus Selesai

Selamat! Anda telah menyelesaikan **Pola React: Props Render & HOC**. Kini Anda memahami kedua pola klasik tersebut, perbandingan kelebihan dan kekurangannya, serta cara merefaktornya menjadi hook kustom modern.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memfaktorkan Ulang HOC menjadi Hook Kustom” gratis?

Ya — teks lengkap “Memfaktorkan Ulang HOC menjadi Hook Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memfaktorkan Ulang HOC menjadi Hook Kustom”?

Ubah HOC withAuth menjadi hook useAuth langkah demi langkah. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Memfaktorkan Ulang HOC menjadi Hook Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Pola Render Props
Penjelasan Komponen Orde Tinggi (HOC)
HOC vs Render Props vs Hook Kustom
Memfaktorkan Ulang HOC menjadi Hook Kustom

← Kembali ke React Academy