रिएक्ट के कस्टम हुक आपके घटकों से पुन: प्रयोज्य कार्यक्षमता को हटाने के लिए एक प्रभावी उपकरण हैं। वे आपके कोड में DRY (डोंट रिपीट योरसेल्फ), रखरखाव और सफाई का समर्थन करते हैं। लेकिन उपयोगी कस्टम हुक विकसित करने के लिए रिएक्ट के मूलभूत विचारों और अनुशंसित प्रक्रियाओं की ठोस समझ की आवश्यकता होती है। इस पोस्ट में, हम रिएक्ट में कस्टम हुक विकसित करने के लिए कुछ बेहतरीन रणनीतियों पर चर्चा करेंगे, उदाहरण के साथ यह बताएंगे कि उन्हें कुशलतापूर्वक कैसे लागू किया जाए।

1. हुक के उद्देश्य को समझें

कस्टम हुक बनाने से पहले, यह समझना महत्वपूर्ण है कि हुक क्या हैं और वे क्यों मौजूद हैं। हुक आपको कार्यात्मक घटकों में राज्य और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देते हैं। कस्टम हुक आपको घटक तर्क को पुन: प्रयोज्य कार्यों में निकालने में सक्षम बनाता है, जिसे कई घटकों में साझा किया जा सकता है।

उदाहरण: बेसिक कस्टम हुक

यहां एक कस्टम हुक का एक सरल उदाहरण दिया गया है जो एक काउंटर का प्रबंधन करता है:

import { useState } from 'react';

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

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

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

// Usage in a component
// const { count, increment, decrement, reset } = useCounter(10);

2. नामकरण परंपराओं का पालन करें

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

टिप: यह सुनिश्चित करने के लिए कि रिएक्ट जानता है कि यह एक हुक है, हमेशा अपने कस्टम हुक का उपयोग शुरू करें।

3. हुक्स को शुद्ध रखें

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

उदाहरण: साइड इफेक्ट्स वाला हुक

import { useState, useEffect } from 'react';

function useFetchData(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 result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
}

// Usage in a component
// const { data, error, loading } = useFetchData('https://api.example.com/data');

4. मौजूदा हुक का लाभ उठाएं
कस्टम हुक बनाते समय, मौजूदा रिएक्ट हुक जैसे यूज़स्टेट, यूज़इफ़ेक्ट, यूज़कॉन्टेक्स्ट और अन्य का लाभ उठाना सुनिश्चित करें। यह सुनिश्चित करता है कि आपका कस्टम हुक कंपोज़ेबल है और रिएक्ट की अंतर्निहित सुविधाओं के साथ निर्बाध रूप से काम कर सकता है।

उदाहरण: हुकों का संयोजन

यहां एक कस्टम हुक है जो स्थानीय भंडारण को प्रबंधित करने के लिए यूज़स्टेट और यूज़इफ़ेक्ट को जोड़ता है:

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Usage in a component
// const [name, setName] = useLocalStorage('name', 'John Doe');

5. पुन: प्रयोज्यता और संरचना

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

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

6. अपने हुक का दस्तावेज़ीकरण करें

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

उदाहरण: एक हुक का दस्तावेजीकरण

/**
 * useCounter
 * 
 * A custom hook to manage a counter.
 *
 * @param {number} initialValue - Initial value of the counter.
 * @returns {object} { count, increment, decrement, reset } - Current count and functions to modify it.
 */
function useCounter(initialValue = 0) {
  // Implementation
}

7. अपने हुक का परीक्षण करें

यह सुनिश्चित करने के लिए परीक्षण आवश्यक है कि आपके कस्टम हुक अपेक्षा के अनुरूप व्यवहार करें। अपने हुक के लिए यूनिट परीक्षण लिखने के लिए रिएक्ट-हुक-टेस्टिंग-लाइब्रेरी या जेस्ट जैसी परीक्षण लाइब्रेरी का उपयोग करें।

उदाहरण: हुक के लिए बुनियादी परीक्षण

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment and decrement counter', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(0);
});

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