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

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

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

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(c => c   1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);

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

export default useCounter;

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

आप किसी भी कार्यात्मक घटक में यूज़काउंटर हुक का उपयोग कर सकते हैं:

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
}

export default CounterComponent;

प्रमुख बिंदु

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

उन्नत उदाहरण: डेटा प्राप्त करना

यहां डेटा प्राप्त करने के लिए एक अधिक उन्नत कस्टम हुक है:

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

प्रयोग

आप डेटा लाने के लिए एक घटक में यूज़फ़ेच हुक का उपयोग कर सकते हैं:

import React from 'react';
import useFetch from './useFetch';

function DataFetchingComponent() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            
Data:
            
{JSON.stringify(data, null, 2)}
        
    );
}

export default DataFetchingComponent;

कस्टम हुक तर्क को समाहित करने और आपके घटकों में कार्यक्षमता को साफ और रखरखाव योग्य तरीके से साझा करने का एक शानदार तरीका है।