Sebagian besar aplikasi yang kami buat saat ini menggunakan data dari sumber eksternal melalui API. Mereka mengambil data dari server dan menampilkannya di UI mereka.

Menggunakan React, Anda dapat membuat kait khusus untuk mengambil data dari API. Diberikan URL, kait ini akan mengembalikan objek yang berisi data dan pesan kesalahan opsional. Anda kemudian dapat menggunakan kait ini dalam sebuah komponen.

Membuat Hook React Kustom

Mulailah dengan membuat file baru bernama useFetch.js. Dalam file ini, buat fungsi yang disebut useFetch() yang menerima string URL sebagai parameter.

konstan useFetch = (url) => {
}

Kaitnya harus buat panggilan API segera setelah dipanggil. Anda dapat menggunakan useEffect() kait untuk ini.

Untuk panggilan API yang sebenarnya, gunakan ambil API. API ini adalah antarmuka berbasis janji yang memungkinkan Anda membuat permintaan dan menerima respons melalui HTTP secara asinkron.

Di kait khusus useFetch(), tambahkan yang berikut ini.

impor { useEffect, useState } dari "reaksi";





instagram viewer



konstan useFetch = (url) => {
konstan [data, setdata] = useState(batal);
konstan [memuat, mengatur pemuatan] = useState(BENAR);
 const [kesalahan, seterror] = useState("");


gunakanEfek(() => {
 ambil (url)
 .maka((res) => res.json())
 .kemudian((data) => {
kesalahan set(data.kesalahan)
set data(data.candaan)
 mengatur pemuatan (Salah)
 })
 }, [url]);


kembali { data, memuat, kesalahan };
};
eksporbawaan gunakanAmbil;

Di kait ini, Anda pertama-tama menginisialisasi status tiga nilai:

  • data: Menampung respons API.
  • error: Menyimpan pesan kesalahan jika terjadi kesalahan.
  • loading: Menyimpan nilai boolean yang menunjukkan apakah ia telah mengambil data API. Inisialisasi status pemuatan ke true. Setelah API mengembalikan data, setel ke false.

Kait useEffect() mengambil string URL sebagai argumen. Ini untuk memastikannya berjalan setiap kali URL berubah.

Fungsi useFetch() akan mengembalikan objek yang berisi data, pemuatan, dan nilai kesalahan.

Menggunakan Kait Kustom Bereaksi

Untuk menggunakan kait khusus useFetch() yang baru saja Anda buat, mulailah dengan mengimpornya:

konstan gunakan Ambil = memerlukan("./useFetch")

Kemudian gunakan sebagai berikut:

konstan {data, memuat, kesalahan} = useFetch (url)

Untuk mendemonstrasikannya, perhatikan komponen Jokes berikut:

konstan Lelucon = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? jenis = tunggal>";
konstan { data, memuat, kesalahan } = useFetch (url);
jika (Memuat) kembali (
<div>Memuat...</div>
 )


kembali (
<div>
 {kesalahan &&<div>{kesalahan}</div>}
 {data &&<div>{<div>{data}</div>}</div>}
</div>
 );
};
eksporbawaan Candaan;

Ini memanggil kait useFetch() dengan URL ke API lelucon dan menerima data, pemuatan, dan nilai kesalahan.

Untuk merender komponen Jokes, pertama-tama periksa apakah Loading benar. Jika ya, tampilkan pernyataan "Memuat ..." jika tidak, buat data dan pesan kesalahan jika ada.

Mengapa Menggunakan Custom React Hooks?

Sama seperti Anda menggunakan kait khusus useFetch() dalam komponen ini, Anda dapat menggunakannya kembali di komponen lain. Itulah indahnya mengeksternalisasi logika dalam kait alih-alih menuliskannya di setiap komponen.

Hooks adalah fitur hebat dari React yang dapat Anda gunakan untuk meningkatkan modularitas kode Anda.