आपके द्वारा विकसित रिएक्ट ऐप्स अक्सर बाहरी एपीआई से डेटा प्राप्त करेंगे, और रिएक्ट टीम ने इस आवश्यकता को पूरा करना सुनिश्चित किया है। उपयोग() हुक डेटा लाने की प्रक्रिया को सरल बनाता है।

इस हुक का उपयोग करके, आप वादों को परिभाषित करने और एप्लिकेशन स्थिति को अपडेट करने के लिए आवश्यक बॉयलरप्लेट कोड की मात्रा कम कर देंगे। रिएक्ट के बारे में सब कुछ जानें उपयोग() हुक और इसे अपने रिएक्ट प्रोजेक्ट्स में कैसे उपयोग करें।

मूल घटक

उदाहरण के लिए, निम्नलिखित घटक पर विचार करें:

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>
 )
}

एक बार जब रिएक्ट इस घटक को प्रस्तुत करता है, तो यह फ़ेच() का उपयोग करके एपीआई का उपभोग करता है. यदि अनुरोध सफल होता है तो यह या तो डेटा को घटक की स्थिति में सहेजता है, या सेट करता है त्रुटि है यदि ऐसा नहीं था तो परिवर्तनीय को सत्य में बदल दें।

स्थिति के आधार पर, यह या तो एपीआई से डेटा या एक त्रुटि संदेश प्रस्तुत करता है। जबकि एपीआई अनुरोध लंबित है, यह पृष्ठ पर "लोड हो रहा है..." टेक्स्ट दिखाता है।

यूज़हुक() कार्यान्वयन

उपरोक्त घटक थोड़ा बोझिल है क्योंकि यह बॉयलरप्लेट कोड से भरा है। इस समस्या को हल करने के लिए, लाएँ उपयोग() अपने कोड को हुक और रीफैक्टर करें।

उपयोग() हुक के साथ, आप उपरोक्त घटक को कोड की केवल दो पंक्तियों तक कम कर सकते हैं। लेकिन ऐसा करने से पहले, ध्यान दें कि यह हुक नया है इसलिए आप इसे केवल रिएक्ट के प्रायोगिक संस्करण में ही उपयोग कर सकते हैं। इसलिए सुनिश्चित करें कि आप उस संस्करण का उपयोग कर रहे हैं:

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

अब आप हुक को प्रतिस्थापित करके उपयोग करने के लिए तैयार हैं उपयोग राज्य और उपयोगप्रभाव बस के साथ आयात करता है उपयोग:

import {use} from"react"

के अंदर डेटा घटक, एकमात्र चीज जो आप रखने जा रहे हैं वह है लाने का अनुरोध। लेकिन आपको फ़ेच अनुरोध को अपने अंदर लपेटना होगा उपयोग() अंकुश; यह या तो JSON डेटा या कोई त्रुटि लौटाता है। फिर प्रतिक्रिया को बुलाए गए वेरिएबल पर सेट करें डेटा:

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

बस इतना ही! जैसा कि आप देख सकते हैं, उपरोक्त कोड घटक को कोड की केवल दो पंक्तियों तक सीमित कर देता है। यह दर्शाता है कि इस तरह के परिदृश्यों में उपयोग() हुक कितना उपयोगी हो सकता है।

लोडिंग स्थिति (सस्पेंस)

का एक महत्वपूर्ण हिस्सा है उपयोग() हुक लोडिंग और त्रुटि स्थितियों को संभाल रहा है। आप इसे के मूल घटक के अंदर कर सकते हैं डेटा.

लोडिंग कार्यक्षमता को लागू करने के लिए, लपेटें डेटा के साथ घटक कौतुहल. यह घटक एक फ़ॉलबैक प्रॉप लेता है जिसे यह आपके लोड होने की स्थिति में किसी भी समय प्रस्तुत करेगा:

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

 </Suspense>
 </>
 )
}

उपयोग() डेटा घटक में हुक इस सस्पेंस को लोड करने के लिए ट्रिगर करता है। हालाँकि वादा अभी तक हल नहीं हुआ है अनुप्रयोग घटक फ़ॉलबैक स्थिति प्रस्तुत करेगा। फिर, जब डेटा घटक प्रतिक्रिया डेटा प्राप्त करता है, यह लोडिंग स्थिति के बजाय सामग्री को प्रस्तुत करता है।

त्रुटि सीमा के साथ त्रुटि प्रबंधन

जब त्रुटियों को पकड़ने की बात आती है, तो आपको जानना आवश्यक है त्रुटि सीमा कैसे काम करती है इसके प्रयेाग के लिए। आमतौर पर, आप इसका उपयोग तब करेंगे जब आप सस्पेंस के साथ काम कर रहे होंगे।

त्रुटि सीमा का एक उदाहरण निम्नलिखित कोड में है:

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;

इस त्रुटि सीमा उदाहरण में एक राज्य ऑब्जेक्ट है जो त्रुटि स्थिति को ट्रैक करता है और त्रुटि क्या है। इसके बाद, यह उस त्रुटि से व्युत्पन्न स्थिति प्राप्त करता है। प्रदान करना() यदि कोई त्रुटि है तो फ़ंक्शन फ़ॉलबैक तत्व प्रदर्शित करता है। अन्यथा, यह जो कुछ भी अंदर है उसे प्रस्तुत करता है .

उपरोक्त घटक काफी हद तक सस्पेंस के समान ही काम करता है। तो, ऐप घटक में, आप सब कुछ अंदर लपेट सकते हैं त्रुटिसीमा घटक इस प्रकार है:

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>
}