Aplikasi React yang Anda kembangkan sering kali mengambil data dari API eksternal, dan tim React telah memastikan untuk memenuhi kebutuhan ini. Itu menggunakan() hook menyederhanakan proses pengambilan data.

Dengan menggunakan hook ini, Anda akan mengurangi jumlah kode boilerplate yang Anda perlukan untuk menentukan janji dan memperbarui status aplikasi. Pelajari semua tentang React menggunakan() hook dan cara menggunakannya dalam proyek React Anda.

Komponen Dasar

Perhatikan komponen berikut, misalnya:

import {useEffect, useState} from"react"
exportfunctionData({ url }) {
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
const [data, setData] = useState()
 useEffect(() => {
 setIsError(false)
 setIsLoading(true)
 setData(undefined)
 fetch(url)
 .then(res => res.json())
 .then(setData)
 .catch(() => setIsError(true))
 .finally(() => setIsLoading(false))
 })
return isLoading? (
Loading...</h1>
 ): isError? (

Error</h1>
 ): (
{JSON.stringify(data, null, 2)}</pre>
 )
}

Setelah React merender komponen ini, komponen tersebut akan dirender menggunakan API menggunakan ambil(). Ini kemudian akan menyimpan data ke status komponen jika permintaan berhasil, atau menyetelnya adalahError variabel menjadi true jika tidak.

Bergantung pada negara bagian, ini kemudian merender data dari API atau pesan kesalahan. Saat permintaan API tertunda, teks "Memuat..." ditampilkan di halaman.

Implementasi useHook()

Komponen di atas agak rumit karena penuh dengan kode boilerplate. Untuk mengatasi masalah ini, bawalah menggunakan() kaitkan dan perbaiki kode Anda.

Dengan hook use(), Anda dapat mengurangi komponen di atas menjadi hanya dua baris kode. Namun sebelum melakukan itu, perhatikan bahwa hook ini agak baru sehingga Anda hanya dapat menggunakannya di versi eksperimental React. Jadi, pastikan Anda menggunakan versi itu:

// package.json
"dependencies": {
"react": "experimental",
"react-dom": "experimental"
}
...

Anda sekarang siap menggunakan pengait, dimulai dengan mengganti useState Dan gunakanEffect impor dengan adil menggunakan:

import {use} from"react"

Di dalam Data komponen, satu-satunya hal yang akan Anda pertahankan adalah permintaan pengambilan. Namun Anda harus memasukkan permintaan pengambilan ke dalam file Anda menggunakan() kait; itu mengembalikan data JSON atau kesalahan. Kemudian atur respons ke variabel yang dipanggil data:

exportfunctionData({ url }) {
const data = use(fetch(url).then(res => res.json()))
return<pre>{JSON.stringify(data, null, 2)}pre>
}

Itu saja! Seperti yang Anda lihat, kode di atas mengurangi komponen menjadi hanya dua baris kode. Hal ini menunjukkan betapa bergunanya hook use() dalam skenario seperti ini.

Status Pemuatan (Ketegangan)

Bagian penting dari menggunakan() hook menangani status pemuatan dan kesalahan. Anda dapat melakukan ini di dalam komponen induk Data.

Untuk mengimplementasikan fungsionalitas pemuatan, bungkus Data komponen dengan Ketegangan. Komponen ini menggunakan prop fallback yang akan dirender kapan pun Anda berada dalam status pemuatan:

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Loading...</div>}>

 </Suspense>
 </>
 )
}

Itu menggunakan() kait di komponen Data memicu ketegangan ini untuk dimuat. Meskipun janji tersebut belum terealisasi, namun Aplikasi komponen akan membuat status fallback. Lalu, ketika Data komponen menerima data respons, ia merender konten alih-alih status pemuatan.

Penanganan Kesalahan Dengan Batasan Kesalahan

Dalam hal menangkap kesalahan, Anda perlu mengetahuinya cara kerja Batas Kesalahan untuk menggunakannya. Biasanya, Anda akan menggunakannya saat Anda bekerja dengan Suspense.

Contoh Error Boundary ada pada kode berikut:

import React from"react"
classErrorBoundaryextendsReact.Component{
 state = { hasError: false, error: null }
static getDerivedStateFromError(error) {
return {
 hasError: true,
 error
 }
 }
 render() {
if (this.state.hasError) {
returnthis.props.fallback
 }
returnthis.props.children
 }
}
exportdefault ErrorBoundary;

Contoh Batas Kesalahan ini memiliki objek status yang melacak status kesalahan dan apa kesalahannya. Selanjutnya, ia mendapatkan status turunan dari kesalahan tersebut. Itu memberikan() fungsi menampilkan elemen fallback jika ada kesalahan. Jika tidak, itu akan merender apa pun yang ada di dalamnya .

Komponen di atas bekerja hampir sama dengan Suspense. Jadi, di komponen App, Anda bisa membungkus semua yang ada di dalamnya Batas Kesalahan komponen seperti ini:

exportdefaultfunctionApp () {
const [url, setUrl] = useState(URL.USERS)
return (
 <>
Oops! There's an error.

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(fetch(url).then(res => res.json()))
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}

exportfunctionData({ url, shouldFetch }) {
let data = "Default data"
if (shouldFetch) {
const data = use(Context)
 }
return<pre>{JSON.stringify(data, null, 2)}pre>
}