कस्टम हुक्स: रिएक्ट में पुन: प्रयोज्य लॉजिक पैटर्न

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

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

संक्षेप में, एक कस्टम हुक एक जावास्क्रिप्ट फ़ंक्शन है जो "use" शब्द से शुरू होता है और अन्य हुक्स को कॉल कर सकता है। वे आपको कंपोनेंट लॉजिक को पुन: प्रयोज्य कार्यों में निकालने की अनुमति देते हैं। यह रेंडर प्रॉप्स, हायर-ऑर्डर कंपोनेंट्स, या अन्य जटिल पैटर्न का सहारा लिए बिना कंपोनेंट्स के बीच स्टेटफुल लॉजिक, साइड इफेक्ट्स, या अन्य जटिल व्यवहारों को साझा करने का एक शक्तिशाली तरीका है।

कस्टम हुक्स की मुख्य विशेषताएं:

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

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

कस्टम हुक्स रिएक्ट डेवलपमेंट में कई महत्वपूर्ण लाभ प्रदान करते हैं:

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

अपना पहला कस्टम हुक बनाना

आइए एक व्यावहारिक उदाहरण के साथ एक कस्टम हुक के निर्माण का वर्णन करें: एक हुक जो विंडो के आकार को ट्रैक करता है।

उदाहरण: useWindowSize

यह हुक ब्राउज़र विंडो की वर्तमान चौड़ाई और ऊंचाई लौटाएगा। यह विंडो का आकार बदलने पर इन मानों को भी अपडेट करेगा।

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty array ensures that effect is only run on mount

  return windowSize;
}

export default useWindowSize;

स्पष्टीकरण:

1. आवश्यक हुक्स आयात करें: हम रिएक्ट से useState और useEffect आयात करते हैं।
2. हुक को परिभाषित करें: हम नामकरण परंपरा का पालन करते हुए useWindowSize नामक एक फ़ंक्शन बनाते हैं।
3. स्टेट को इनिशियलाइज़ करें: हम विंडो की प्रारंभिक चौड़ाई और ऊंचाई के साथ windowSize स्टेट को इनिशियलाइज़ करने के लिए useState का उपयोग करते हैं।
4. इवेंट लिसनर सेट करें: हम विंडो में एक रीसाइज़ इवेंट लिसनर जोड़ने के लिए useEffect का उपयोग करते हैं। जब विंडो का आकार बदला जाता है, तो handleResize फ़ंक्शन windowSize स्टेट को अपडेट करता है।
5. क्लीनअप: हम कंपोनेंट के अनमाउंट होने पर इवेंट लिसनर को हटाने के लिए useEffect से एक क्लीनअप फ़ंक्शन लौटाते हैं। यह मेमोरी लीक को रोकता है।
6. मान लौटाएं: हुक windowSize ऑब्जेक्ट लौटाता है, जिसमें विंडो की वर्तमान चौड़ाई और ऊंचाई होती है।

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

अब जब हमने अपना कस्टम हुक बना लिया है, तो आइए देखें कि इसे रिएक्ट कंपोनेंट में कैसे उपयोग किया जाए।

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

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    

      
Window width: {width}px
      
Window height: {height}px
    
  );
}

export default MyComponent;

स्पष्टीकरण:

1. हुक आयात करें: हम useWindowSize कस्टम हुक आयात करते हैं।
2. हुक को कॉल करें: हम कंपोनेंट के भीतर useWindowSize हुक को कॉल करते हैं।
3. मानों तक पहुँचें: हम width और height मान प्राप्त करने के लिए लौटाए गए ऑब्जेक्ट को डीस्ट्रक्चर करते हैं।
4. मानों को रेंडर करें: हम कंपोनेंट के UI में चौड़ाई और ऊंचाई के मानों को रेंडर करते हैं।

कोई भी कंपोनेंट जो useWindowSize का उपयोग करता है, विंडो का आकार बदलने पर स्वचालित रूप से अपडेट हो जाएगा।

अधिक जटिल उदाहरण

आइए कस्टम हुक्स के लिए कुछ और उन्नत उपयोग मामलों का पता लगाएं।

उदाहरण: useLocalStorage

यह हुक आपको स्थानीय भंडारण से आसानी से डेटा संग्रहीत करने और पुनर्प्राप्त करने की अनुमति देता है।

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial value to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = (value) => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Save state
      setStoredValue(valueToStore);
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

उपयोग:

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

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Guest');

  return (
    

      
Hello, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

उदाहरण: useFetch

यह हुक एक एपीआई से डेटा लाने के लिए लॉजिक को इनकैप्सुलेट करता है।

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

उपयोग:

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

function MyComponent() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1');

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

  return (
    

      
Title: {data.title}
      
Completed: {data.completed ? 'Yes' : 'No'}
    
  );
}

export default MyComponent;

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

यह सुनिश्चित करने के लिए कि आपके कस्टम हुक्स प्रभावी और रखरखाव योग्य हैं, इन सर्वोत्तम प्रथाओं का पालन करें:

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

बचने के लिए सामान्य नुकसान

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

उन्नत पैटर्न

कस्टम हुक्स को कंपोज़ करना

अधिक जटिल लॉजिक बनाने के लिए कस्टम हुक्स को एक साथ कंपोज़ किया जा सकता है। उदाहरण के लिए, आप प्राप्त डेटा को स्वचालित रूप से स्थानीय भंडारण में बनाए रखने के लिए useLocalStorage हुक को useFetch हुक के साथ जोड़ सकते हैं।

हुक्स के बीच लॉजिक साझा करना

यदि कई कस्टम हुक सामान्य लॉजिक साझा करते हैं, तो आप उस लॉजिक को एक अलग उपयोगिता फ़ंक्शन में निकाल सकते हैं और इसे दोनों हुक्स में पुन: उपयोग कर सकते हैं।

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

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

वास्तविक दुनिया के उदाहरण

यहां कुछ उदाहरण दिए गए हैं कि वास्तविक दुनिया के अनुप्रयोगों में कस्टम हुक्स का उपयोग कैसे किया जा सकता है:

• फ़ॉर्म सत्यापन: फ़ॉर्म की स्थिति, सत्यापन और सबमिशन को संभालने के लिए एक useForm हुक बनाएं।
• प्रमाणीकरण: उपयोगकर्ता प्रमाणीकरण और प्राधिकरण का प्रबंधन करने के लिए एक useAuth हुक लागू करें।
• थीम प्रबंधन: विभिन्न थीम (लाइट, डार्क, आदि) के बीच स्विच करने के लिए एक useTheme हुक विकसित करें।
• जियोलोकेशन: उपयोगकर्ता के वर्तमान स्थान को ट्रैक करने के लिए एक useGeolocation हुक बनाएं।
• स्क्रॉल डिटेक्शन: यह पता लगाने के लिए एक useScroll हुक बनाएं कि उपयोगकर्ता ने पृष्ठ पर एक निश्चित बिंदु तक स्क्रॉल किया है या नहीं।

उदाहरण: मैपिंग या डिलीवरी सेवाओं जैसे क्रॉस-सांस्कृतिक अनुप्रयोगों के लिए useGeolocation हुक

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'Geolocation is not supported by this browser.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

निष्कर्ष

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

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

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