कस्टम हुक रिएक्ट में एक शक्तिशाली विशेषता है जिसका उपयोग रिएक्ट बिल्ड-इन हुक के विपरीत अधिक विशिष्ट उद्देश्यों के लिए किया जाता है, और यह सामान्य कार्यात्मकताओं को स्वतंत्र कार्यों में समाहित करके किया जाता है। कस्टम हुक पुन: प्रयोज्यता को बढ़ावा देते हैं, घटक संगठन में सुधार करते हैं और समग्र रूप से कोड रखरखाव को बढ़ाते हैं।

इस गाइड में कस्टम हुक का उपयोग करने के उद्देश्यों, कस्टम हुक बनाने की मूल बातें समझने और इसके अन्य घटकों का उपयोग करने के तरीके के बारे में विस्तार से बताया जाएगा। फिर हम एक फ़ेच एपीआई कस्टम हुक बनाकर वास्तविक दुनिया का उदाहरण प्रस्तुत करेंगे।

मूल बातें समझना

आम तौर पर डेवलपर कस्टम हुक शब्द से डरता है इसलिए आइए इसे रहस्य से मुक्त करें।

एक कस्टम हुक बस एक फ़ंक्शन है जो उपयोग उपसर्ग से शुरू होता है (जो कस्टम हुक के काम करने के लिए महत्वपूर्ण है)।
इस फ़ंक्शन में पुन: प्रयोज्य तर्क शामिल हैं जो रिएक्ट बिल्ड-इन हुक का उपयोग करते हैं। आमतौर पर आप एक कस्टम हुक का उपयोग करने पर विचार करते हैं यदि आपके पास कई घटकों में समान तर्क है, तो कस्टम हुक का उपयोग करके आप कोड संगठन और रखरखाव को बढ़ाने जैसे कई मुद्दों को हल कर सकते हैं।

एक सरल कस्टम हुक बनाना

नीचे दिया गया उदाहरण एक साधारण काउंटर कस्टम हुक है जो यूज़स्टेट हुक का उपयोग करके गिनती स्थिति को प्रबंधित करता है और वृद्धि या वेतन वृद्धि फ़ंक्शंस का उपयोग करके क्रमशः गिनती को अपडेट करता है जो केवल गिनती स्थिति सेट करता है।

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

बधाई हो आपने अपना स्वयं का कस्टम हुक बनाया, यह बहुत आसान है। आगे इस हुक का उपयोग करने के तरीके के बारे में जानेंगे

घटकों में कस्टम हुक का उपयोग करना

अन्य घटकों में कस्टम हुक का उपयोग करना केवल नष्ट करके किया जाता है, लौटाए गए मान अन्य घटकों के अंदर कस्टम हुक बनाते हैं

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
       
     - 
  )
}

export default Page

कस्टम हुक का उपयोग करने का वास्तविक विश्व उदाहरण

सबसे दोहराए जाने वाले तर्कों में से एक एपीआई लाना है, एक ई-कॉमर्स साइट प्रमाणीकरण, भुगतान प्रक्रिया, सभी उत्पादों, टिप्पणियों, समीक्षाओं आदि को प्रदर्शित करने के लिए डेटा लाएगी।

आप पूरे एप्लिकेशन में दोहराए जाने वाले फ़ेचिंग लॉजिक की मात्रा की कल्पना कर सकते हैं जिसे एक कस्टम हुक का उपयोग करके सरल बनाया जा सकता है।

इस अनुभाग में एक कस्टम फ़ेचिंग हुक बनाया जाएगा।

हम यूज़स्टेट और यूज़इफ़ेक्ट बिल्ड-इन रिएक्ट हुक का उपयोग करेंगे
हमारे पास डेटा के लिए एक स्थिति होगी, यदि हम डेटा प्राप्त करते समय एक स्पिनर दिखाना चाहते हैं तो लंबित स्थिति और लाने में विफलता के मामले में त्रुटि स्थिति होगी।

नीचे दिया गया कोड स्वतः स्पष्ट है। यूज़इफ़ेक्ट के अंदर हम एक फ़ेचडेटा फ़ंक्शन को परिभाषित करते हैं जो एसिंक्रोनस है और जो फ़ेचिंग लॉजिक को संभालेगा। यूज़इफ़ेक्ट के नीचे कस्टम हुक निम्नलिखित मान लौटाएगा जिसका उपयोग अन्य सभी घटक डेटा, लंबित, त्रुटि में किया जा सकता है।

ध्यान दें कि हम कस्टम हुक पैरामीटर का उपयोग करने के लिए एक यूआरएल मान पास कर रहे हैं जिसका मतलब है कि डेटा कस्टम हुक को पास किया जा सकता है

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

पेज घटकों के अंदर यूज़फ़ेच हुक का उपयोग करके अब हम त्रुटि के मामले में क्लाइंट को संदेश प्रदर्शित कर सकते हैं, डेटा लाते समय एक स्पिनर दिखा सकते हैं और अंत में क्लाइंट को डेटा प्रदर्शित कर सकते हैं।

इस घटक का उपयोग सभी एप्लिकेशन में बार-बार किया जा सकता है जिससे दोहराए जाने वाले कोड की मात्रा कम हो जाती है।

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server

  return(
    {pending ? 
     ( )
     :
     (
      data.map((item) => (
        

          
{item.title}
  
          
{item.body}
        
       )
      )
    )}
  )
}

export default Page;

निष्कर्ष

कस्टम हुक रिएक्ट घटकों के भीतर तर्क को एनकैप्सुलेट करने और पुन: उपयोग करने के लिए एक शक्तिशाली तंत्र प्रदान करते हैं, सामान्य कार्यात्मकताओं को समर्पित कार्यों में निकालकर, आप कोड संगठन को बढ़ा सकते हैं, रखरखाव में सुधार कर सकते हैं और कोड पुन: प्रयोज्यता को बढ़ावा दे सकते हैं।

हमने कस्टम हुक बनाने के बुनियादी सिद्धांतों का पता लगाया है, यह समझा है कि रिएक्ट घटकों के भीतर उनका उपयोग कैसे किया जाए और कस्टम हुक का उपयोग करने का वास्तविक दुनिया का उदाहरण दिखाया गया है।