Menggunakan ulang logika dengan Custom Hooks

Custom Hooks: Berbagi logika antar komponen

Bayangkan Anda sedang mengembangkan aplikasi yang sangat bergantung pada jaringan (seperti kebanyakan aplikasi). Anda ingin memberi peringatan kepada pengguna jika koneksi jaringannya tiba-tiba terputus saat mereka menggunakan aplikasi Anda. Bagaimana cara melakukannya? Sepertinya Anda akan memerlukan dua hal dalam komponen Anda:

1. Sebuah keadaan (state) yang melacak apakah jaringan online.
2. Sebuah Efek yang berlangganan (subscribes) pada peristiwa (events) online dan offline global, dan memperbarui state tersebut.

Hal ini akan menjaga sinkronisasi komponen Anda dengan status jaringan. Anda mungkin memulainya dengan sesuatu seperti ini:

Coba matikan dan nyalakan jaringan Anda, dan perhatikan bagaimana StatusBar ini diperbarui sebagai respons terhadap tindakan Anda.

Sekarang bayangkan Anda juga ingin menggunakan logika yang sama pada komponen yang berbeda. Anda ingin mengimplementasikan tombol Simpan yang akan menjadi tidak aktif dan menunjukkan “Sedang menghubungkan kembali…” alih-alih “Simpan” saat jaringan mati.

Untuk memulai, Anda dapat menyalin dan mem-paste state isOnline dan Efeknya ke dalam SaveButton:

Pastikan, jika Anda mematikan jaringan, tampilan tombol tersebut akan berubah.

Kedua komponen ini berfungsi dengan baik, tetapi duplikasi logika di antara keduanya tidak diinginkan. Meskipun mereka memiliki tampilan visual yang berbeda, Anda ingin menggunakan kembali logika yang sama di antara keduanya.

Mengekstrak custom Hook Anda sendiri dari sebuah komponen

Bayangkan bahwa, serupa dengan useState dan useEffect, ada sebuah Hook useOnlineStatus bawaan. Kemudian kedua komponen ini bisa disederhanakan dan Anda dapat menghapus duplikasi di antara keduanya:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Progress saved');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

Meskipun tidak ada Hook bawaan seperti itu, Anda dapat menulisnya sendiri. Deklarasikan fungsi bernama useOnlineStatus dan pindahkan semua kode duplikat ke dalamnya dari komponen yang Anda tulis sebelumnya:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

Di akhir fungsi, kembalikan isOnline. Ini memungkinkan komponen Anda membaca nilai itu:

Pastikan bahwa mengubah jaringan on dan off memperbarui kedua komponen.

Sekarang komponen Anda tidak memiliki logika berulang. Lebih penting lagi, kode di dalamnya menjelaskan apa yang ingin mereka lakukan (gunakan status online!) daripada bagaimana melakukannya (dengan berlangganan events browser).

Ketika Anda mengekstrak logika ke dalam custom Hooks, Anda dapat menyembunyikan detail-detail rumit tentang bagaimana Anda menangani sistem eksternal atau API browser. Kode komponen Anda mengekspresikan niat Anda, bukan implementasi.

Nama hook selalu diawali dengan use

Aplikasi React dibangun dari komponen. Komponen dibuat dari Hooks, baik bawaan maupun kustom. Anda mungkin akan sering menggunakan Hooks khusus yang dibuat oleh orang lain, tetapi kadang-kadang Anda mungkin menulisnya sendiri!

Anda harus mengikuti konvensi penamaan ini:

1. Nama komponen React harus dimulai dengan huruf kapital, seperti StatusBar dan SaveButton. Komponen React juga perlu mengembalikan sesuatu yang dapat ditampilkan oleh React, seperti sebuah potongan JSX.
2. Nama hook harus dimulai dengan use diikuti dengan huruf kapital, seperti useState (bawaan) atau useOnlineStatus (kustom, seperti yang ditunjukkan pada contoh sebelumnya). Hooks dapat mengembalikan nilai arbitrer.

Konvensi ini menjamin bahwa Anda selalu dapat melihat sebuah komponen dan mengetahui di mana letak state, Efek, dan fitur React lainnya mungkin “bersembunyi”. Misalnya, jika Anda melihat sebuah panggilan fungsi getColor() di dalam komponen Anda, Anda bisa yakin bahwa panggilan itu tidak mungkin mengandung state React di dalamnya karena namanya tidak dimulai dengan use. Namun, sebuah panggilan fungsi seperti useOnlineStatus() kemungkinan besar akan mengandung panggilan Hook lain di dalamnya!

// 🔴 Hindari: Sebuah Hook yang tidak menggunakan Hooks
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Baik: Sebuah fungsi biasa yang tidak menggunakan Hooks
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ Tidak apa-apa untuk memanggil getSorted() secara kondisional karena ini bukan sebuah Hook
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Baik: Sebuah Hook yang menggunakan Hook lainnya
function useAuth() {
  return useContext(Auth);
}

// ✅ Baik: Sebuah Hook yang kemungkinan akan menggunakan beberapa Hook lainnya nanti
function useAuth() {
  // TODO: Ganti dengan baris ini saat autentikasi diterapkan:
  // return useContext(Auth);
  return TEST_USER;
}

Custom Hooks memungkinkan Anda berbagi logika yang berkelanjutan, bukan state itu sendiri

Pada contoh sebelumnya, ketika Anda menghidupkan dan mematikan jaringan, kedua komponen diperbarui secara bersamaan. Namun, salah jika berpikir bahwa satu variabel state isOnline dibagikan di antara keduanya. Lihat kode ini:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Ini bekerja dengan cara yang sama seperti sebelumnya sebelum duplikasi diekstrak:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

Ini adalah dua variabel state dan Efek yang sepenuhnya independen! Mereka kebetulan memiliki nilai yang sama pada saat yang sama karena Anda menyinkronkannya dengan nilai eksternal yang sama (apakah jaringan sedang hidup).

Untuk menggambarkan hal ini dengan lebih baik, kita memerlukan contoh yang berbeda. Pertimbangkan komponen Form ini:

Ada beberapa logika yang berulang untuk setiap kolom formulir:

1. Ada sebuah state (firstName dan lastName).
2. Ada handler perubahan (handleFirstNameChange dan handleLastNameChange).
3. Ada JSX yang menentukan atribut value dan onChange untuk input tersebut.

Anda dapat mengekstrak logika yang berulang ke dalam Custom Hook useFormInput ini:

Perhatikan bahwa itu hanya mendeklarasikan satu variabel state yang disebut value.

Namun, komponen Form memanggil useFormInput dua kali:

function Form() {
  const firstNameProps = useFormInput('Mary');
  const lastNameProps = useFormInput('Poppins');
  // ...

Inilah sebabnya mengapa itu bekerja seperti mendeklarasikan dua variabel state yang terpisah!

Custom Hooks memungkinkan Anda berbagi logika berkelanjutan tetapi tidak state itu sendiri. Setiap panggilan Hook sepenuhnya independen dari setiap panggilan ke Hook yang sama. Inilah mengapa kedua sandbox di atas sepenuhnya setara. Jika Anda mau, gulir ke atas dan bandingkan. Perilaku sebelum dan sesudah mengekstrak Custom Hook itu identik.

Ketika Anda perlu membagikan state itu sendiri antara beberapa komponen, angkat dan lewatkan ke bawah sebagai gantinya.

Mengirimkan nilai reaktif antara Hooks

Kode di dalam Custom Hooks akan dijalankan kembali setiap kali komponen Anda dirender ulang. Oleh karena itu, seperti halnya komponen, Custom Hooks harus bersifat murni. Bayangkan kode Custom Hooks sebagai bagian dari badan komponen Anda!

Karena Custom Hooks di-render ulang bersama komponen Anda, mereka selalu menerima prop dan state terbaru. Untuk mengetahui apa artinya, pertimbangkan contoh ruang obrolan ini. Ubah URL server atau ruang obrolannya:

Ketika Anda mengubah serverUrl atau roomId, Effect “bereaksi” terhadap perubahan Anda dan disinkronkan ulang. Anda dapat mengetahui dari pesan konsol bahwa obrolan terhubung kembali setiap kali Anda mengubah dependensi Effect Anda.

Sekarang pindahkan kode Effect ke dalam Custom Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Ini memungkinkan komponen ChatRoom Anda memanggil Custom Hook tanpa perlu mengkhawatirkan cara kerjanya di dalam:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        Server URL:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>Welcome to the {roomId} room!</h1>
    </>
  );
}

Ini terlihat jauh lebih sederhana! (Tapi tetap melakukan hal yang sama.)

Perhatikan bahwa logika tetap merespon perubahan prop dan state. Coba edit URL server atau ruang yang dipilih:

Perhatikan bagaimana Anda mengambil nilai pengembalian dari satu Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

dan meneruskannya sebagai masukan ke Hook lain:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

Setiap kali komponen ChatRoom Anda di-render ulang, komponen roomId dan serverUrl terbaru diteruskan ke Hook Anda. Inilah sebabnya Effect Anda terhubung kembali ke obrolan setiap kali nilainya berbeda setelah render ulang. (Jika Anda pernah bekerja dengan perangkat lunak pemrosesan audio atau video, merantai Hooks seperti ini mungkin mengingatkan Anda pada efek visual atau audio yang saling terkait. Seolah-olah output dari useState “diumpankan ke dalam” input dari useChatRoom.)

Passing event handlers to custom Hooks

Saat Anda mulai menggunakan useChatRoom di lebih banyak komponen, Anda mungkin ingin membiarkan komponen menyesuaikan perilakunya. Sebagai contoh, saat ini, logika tentang apa yang harus dilakukan ketika sebuah pesan datang di-hardcode di dalam Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Katakanlah Anda ingin memindahkan logika ini kembali ke komponen Anda:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

Untuk membuatnya berfungsi, ubah custom Hook Anda untuk menerima onReceiveMessage sebagai salah satu opsi bernama:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}

Ini akan berhasil, tetapi ada satu peningkatan lagi yang dapat Anda lakukan ketika custom Hook Anda menerima event handler.

Menambahkan dependensi pada onReceiveMessage tidak ideal karena akan menyebabkan chat terhubung kembali setiap kali komponen di-render ulang. Bungkus event handler ini ke dalam Effect Event untuk menghapusnya dari dependensi:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}

Sekarang obrolan tidak akan terhubung kembali setiap kali komponen ChatRoom di-render ulang. Berikut adalah demo yang berfungsi penuh untuk meneruskan event handler ke custom Hook yang dapat Anda mainkan:

Perhatikan bagaimana Anda tidak perlu lagi mengetahui bagaimana useChatRoom berfungsi untuk menggunakannya. Anda bisa menambahkannya ke komponen lain, meneruskan opsi lain, dan itu akan bekerja dengan cara yang sama. Itulah kekuatan custom Hooks.

When to use custom Hooks

You don’t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.

However, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn’t need Effects very often, so if you’re writing one, it means that you need to “step outside React” to synchronize with some external system or to do something that React doesn’t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.

For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // This Effect fetches cities for a country
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // This Effect fetches areas for the selected city
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

Although this code is quite repetitive, it’s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn’t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

Now you can replace both Effects in the ShippingForm components with calls to useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By “hiding” your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app’s Effects will be in custom Hooks.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Avoid: using custom "lifecycle" Hooks
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Avoid: creating custom "lifecycle" Hooks
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Good: two raw Effects separated by purpose

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Great: custom Hooks named after their purpose
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

Custom Hooks membantu Anda bermigrasi ke pola yang lebih baik

Effects merupakan sebuah “escape hatch”: Anda menggunakannya ketika Anda perlu “keluar dari React” dan ketika tidak ada solusi bawaan yang lebih baik untuk kasus penggunaan Anda. Seiring waktu, tujuan tim React adalah untuk mengurangi jumlah Effects di aplikasi Anda seminimal mungkin dengan memberikan solusi yang lebih spesifik untuk masalah yang lebih spesifik. Membungkus Effects Anda dalam custom Hooks memudahkan untuk memutakhirkan kode Anda ketika solusi-solusi ini tersedia.

Mari kita kembali ke contoh ini:

Dalam contoh di atas, useOnlineStatus diimplementasikan dengan sepasang useState dan useEffect. Namun, ini bukanlah solusi terbaik. Ada beberapa kasus tepi yang tidak dipertimbangkan. Misalnya, diasumsikan bahwa ketika komponen dipasang, isOnline sudah benar, tetapi hal ini mungkin salah jika jaringan sudah offline. Anda dapat menggunakan API browser navigator.onLine untuk memeriksanya, tetapi menggunakannya secara langsung tidak akan berhasil di server untuk menghasilkan HTML awal. Singkatnya, kode ini dapat diperbaiki.

Untungnya, React 18 menyertakan API khusus yang disebut useSyncExternalStore yang menangani semua masalah ini untuk Anda. Berikut adalah bagaimana Hook useOnlineStatus Anda, ditulis ulang untuk memanfaatkan API baru ini:

Perhatikan bagaimana Anda tidak perlu mengubah komponen apa pun untuk melakukan migrasi ini:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Ini adalah alasan lain mengapa membungkus Effects di custom Hooks seringkali bermanfaat:

1. Anda membuat aliran data ke dan dari Effects Anda sangat eksplisit.
2. Anda membiarkan komponen Anda fokus pada maksud daripada pada implementasi yang tepat dari Effects Anda.
3. Saat React menambahkan fitur baru, Anda dapat menghapus Effects tersebut tanpa mengubah komponen apa pun.

Mirip dengan sistem desain, Anda mungkin merasa terbantu untuk mulai mengekstraksi idiom umum dari komponen aplikasi Anda ke dalam custom Hooks. Ini akan membuat kode komponen Anda tetap fokus pada maksud, dan memungkinkan Anda menghindari menulis Effects mentah terlalu sering. Banyak custom Hooks yang sangat baik dikelola oleh komunitas React.

import { use } from 'react'; // Not available yet!

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

There is more than one way to do it

Let’s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:

To make the component more readable, you might extract the logic into a useFadeIn custom Hook:

You could keep the useFadeIn code as is, but you could also refactor it more. For example, you could extract the logic for setting up the animation loop out of useFadeIn into a custom useAnimationLoop Hook:

However, you didn’t have to do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript class:

Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to chain multiple animations), the more it makes sense to extract that logic out of Effects and Hooks completely like in the sandbox above. Then, the code you extracted becomes the “external system”. This lets your Effects stay simple because they only need to send messages to the system you’ve moved outside React.

The examples above assume that the fade-in logic needs to be written in JavaScript. However, this particular fade-in animation is both simpler and much more efficient to implement with a plain CSS Animation:

Sometimes, you don’t even need a Hook!