React38 / 78

Membuat Custom Hook useFetch

Custom Hook bertugas memisahkan dan mereset ulang logika async/state agar bisa dipakai oleh banyak komponen.

👀 Contoh dulu

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]);
  return data;
}

Hasilnya: Mengembalikan data ber-tipe yang siap dikonsumsi komponen mana saja.

💡 Custom Hook harus selalu diawali kata 'use'.

📝 Sekarang giliranmu

Definisikan deklarasi fungsi Custom Hook function useFetch(url).

Preview