Bab 6: Custom Hooks

Apa itu Custom Hook?

Custom Hook adalah sebuah **fungsi JavaScript** yang namanya diawali dengan kata use dan dapat memanggil Hook lain di dalamnya (seperti `useState` atau `useEffect`). Ini bukan fitur bawaan React, melainkan sebuah konvensi yang memungkinkan kita berbagi logika stateful.

Tujuan utamanya adalah untuk menghindari duplikasi kode. Jika Anda menemukan diri Anda menulis logika yang sama (misalnya, mengambil data, mengelola status toggle) di beberapa komponen, itu adalah kandidat yang sempurna untuk diekstrak menjadi Custom Hook.

Membuat Custom Hook Pertama: `useToggle`

Mari kita buat hook sederhana untuk mengelola nilai boolean (true/false) yang bisa di-toggle.

import { useState } from 'react';

// Nama fungsi harus diawali dengan "use"
const useToggle = (initialValue = false) => {
    const [value, setValue] = useState(initialValue);

    // Fungsi untuk membalik nilai boolean
    const toggle = () => setValue(prevValue => !prevValue);

    // Kembalikan nilai dan fungsi toggle dalam sebuah array
    return [value, toggle];
};

function ToggleExample() {
  // Gunakan hook untuk dua state yang berbeda
  const [isToggled, toggle] = useToggle(false);
  const [isHappy, toggleMood] = useToggle(true);

  return (
    <>
      <p>Status: {isToggled ? "ON" : "OFF"}</p>
      <button onClick={toggle}>Toggle Status</button>

      <p>Mood: {isHappy ? "😊" : "😢"}</p>
      <button onClick={toggleMood}>Ubah Mood</button>
    </>
  );
}