विषयसूची

1. आवश्यकताएँ
2. स्थापना
3. परिचय
4. कस्टम हुक क्या हैं?
5. आपको कस्टम हुक कब बनाना चाहिए?
6. उदाहरण: एक कस्टम हुक बनाना
   • चरण 1: पुन: प्रयोज्य तर्क की पहचान करें
   • चरण 2: एक कस्टम हुक में तर्क निकालना
   • चरण 3: कस्टम हुक का उपयोग करना
7. कस्टम हुक के लाभ
8. कस्टम हुक के लिए सर्वोत्तम अभ्यास
9. निष्कर्ष

पूर्वावश्यकताएँ:

सुनिश्चित करें कि आपको इनमें आवश्यक पृष्ठभूमि ज्ञान है:

प्रतिक्रिया का बुनियादी ज्ञान
Node.js और npm

स्थापना:

Vite का उपयोग करके एक नए रिएक्ट प्रोजेक्ट के साथ शुरुआत करने के लिए, इन चरणों का पालन करें:

मैं। अपना टर्मिनल खोलें और एक नया प्रोजेक्ट बनाने के लिए निम्नलिखित कमांड चलाएँ:

   npm create vite@latest my-react-app --template react

ii. अपनी परियोजना निर्देशिका में नेविगेट करें:

     cd my-react-app

iii. निर्भरताएँ स्थापित करें: अपने प्रोजेक्ट के लिए आवश्यक पैकेज स्थापित करें:

   npm install

iv. विकास सर्वर प्रारंभ करें: विकास सर्वर चलाएँ:

    npm run dev

आपका रिएक्ट ऐप अब चलने लगेगा, और आप इसे अपने ब्राउज़र में http://localhost:5173 पर देख सकते हैं।

परिचय:

रिएक्ट हुक क्या हैं?:

रिएक्ट हुक विशेष फ़ंक्शन हैं जो आपको कार्यात्मक घटकों में राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देते हैं। स्थिति और दुष्प्रभावों के प्रबंधन के लिए यूज़स्टेट और यूज़इफ़ेक्ट जैसे हुक आवश्यक हैं।

कस्टम हुक क्या हैं?:

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

हुक समझ रहे हैं?

हुक को समझना:
यूज़स्टेट, यूज़इफ़ेक्ट और यूज़कॉन्टेक्स्ट जैसे हुक आपको क्लास लिखे बिना स्टेट और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देते हैं। वे ऐसे ब्लॉक बना रहे हैं जो आपको घटक तर्क को मॉड्यूलर तरीके से संभालने देते हैं।

आपको कस्टम हुक कब बनाना चाहिए?

कस्टम हुक आपको विभिन्न घटकों में स्टेटफुल लॉजिक का पुन: उपयोग करने देते हैं। एक सरल उदाहरण एक काउंटर घटक है, जिसमें वृद्धि, कमी और रीसेट कार्यक्षमता है, यदि आपको कई घटकों में समान तर्क की आवश्यकता है, तो तर्क को एक कस्टम हुक में ले जाया जा सकता है। आमतौर पर इस्तेमाल किया जाने वाला एक अन्य उदाहरण एक घटक है जो एपीआई से डेटा लाता है, और यदि आपको कई घटकों में एक ही तर्क की आवश्यकता है, तो आप उस तर्क को एक कस्टम हुक में ले जा सकते हैं।

एक कस्टम हुक बनाने का उदाहरण

उदाहरण: आइए रिएक्ट हुक(यूजस्टेट).in ऐप.जेएसएक्स के साथ एक सरल काउंटर ऐप बनाएं

चरण 1 पुन: प्रयोज्य तर्क की पहचान करें

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

उपरोक्त कोड में, पुन: प्रयोज्य तर्क में काउंटरस्टेट, प्रारंभिक स्थिति (ओ), वेतन वृद्धि, कमी और रीसेट फ़ंक्शन शामिल हैं। वृद्धि प्रारंभिक स्थिति में 1 जोड़ती है जबकि वेतन वृद्धि प्रारंभिक स्थिति से 1 घटाती है, जबकि रीसेट पहली प्रारंभिक स्थिति पर रीसेट करता है।

चरण 2 कस्टम हुक में तर्क निकालना

हम src फ़ोल्डर में Hooks नाम से एक फ़ोल्डर बना सकते हैं, फिर नीचे दिखाए गए अनुसार कस्टम हुक के लिए useCouter.jsx नामक एक फ़ाइल बना सकते हैं।

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

चरण 3 कस्टम हुक का उपयोग करना

अब, आइए App.jsx में अपने कस्टम हुक का उपयोग करें।

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    

      

        
Counter App 
        
{value}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

उदाहरण 2.

आइए सभी एपीआई कॉल के लिए एक कस्टम हुक यूज़फ़ेच बनाएं।

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

प्रयोग

App.jsx में, हम JSON प्लेसहोल्डर से उपयोगकर्ता नाम लाने के लिए इस कस्टम हुक का उपयोग कर सकते हैं जैसा कि नीचे दिखाया गया है;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    

      

        
Counter Appp 
        
{value}
        {loading && 
Loading....
}
        {error && 
Error: {error.message}
}
        {data && data.length > 0 && (
          

            
Username: {data[0].username}
          
        )}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

कस्टम हुक के लाभ

पुन: प्रयोज्यता:

मुख्य लाभों में से एक पुन: प्रयोज्य है। आप कोड दोहराव को कम करते हुए, कई घटकों में एक ही कस्टम हुक का उपयोग कर सकते हैं।

चिंताओ का विभाजन:

कस्टम हुक आपको तर्क को यूआई से अलग करने में मदद करते हैं। आपके घटक रेंडरिंग पर ध्यान केंद्रित करते हैं, जबकि कस्टम हुक तर्क को संभालते हैं।

क्लीनर घटक:

जटिल तर्क को कस्टम हुक में ले जाने से, आपके घटक सरल और समझने में आसान हो जाते हैं।

कस्टम हुक के लिए सर्वोत्तम अभ्यास

नामकरण परंपराएँ:

रिएक्ट नामकरण परंपरा का पालन करने के लिए कस्टम हुक को "उपयोग" शब्द से शुरू करना चाहिए। यह आपके कोड में हुक को तुरंत पहचानने में भी मदद करता है।

उदाहरण: यूज़फ़ेच, यूज़फ़ॉर्म, यूज़ऑथ।

निर्भरताएँ संभालना:

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

अनावश्यक पुन: प्रस्तुतीकरण से बचना:

महंगी गणनाओं को दोबारा चलाने या डेटा को दोबारा लाने से बचने के लिए मूल्यों को याद करके या यूज़कॉलबैक और यूज़मेमो जैसे हुक का उपयोग करके अपने कस्टम हुक को अनुकूलित करें।

निष्कर्ष

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

GitHub पर प्रोजेक्ट देखें: मेरा GitHub रिपोजिटरी