कस्टम हुक्स: रिॲक्टमधील पुन्हा वापरता येण्याजोगे लॉजिक पॅटर्न्स

रिॲक्ट हुक्सने फंक्शनल कंपोनेंट्समध्ये स्टेट आणि लाइफसायकल वैशिष्ट्ये आणून रिॲक्ट कंपोनेंट्स लिहिण्याच्या पद्धतीत क्रांती घडवली. ते देत असलेल्या अनेक फायद्यांपैकी, कस्टम हुक्स अनेक कंपोनेंट्समध्ये लॉजिक वेगळे काढण्यासाठी आणि पुन्हा वापरण्यासाठी एक शक्तिशाली यंत्रणा म्हणून उदयास आले आहेत. हा ब्लॉग पोस्ट कस्टम हुक्सच्या जगात खोलवर जाईल, त्यांचे फायदे, निर्मिती आणि व्यावहारिक उदाहरणांसह त्यांचा वापर शोधेल.

कस्टम हुक्स म्हणजे काय?

थोडक्यात, कस्टम हुक हे एक जावास्क्रिप्ट फंक्शन आहे जे "use" या शब्दाने सुरू होते आणि इतर हुक्सना कॉल करू शकते. ते तुम्हाला कंपोनेंट लॉजिकला पुन्हा वापरण्यायोग्य फंक्शन्समध्ये काढण्याची परवानगी देतात. रेंडर प्रॉप्स, हायर-ऑर्डर कंपोनेंट्स किंवा इतर जटिल पॅटर्न्सचा अवलंब न करता स्टेटफुल लॉजिक, साइड इफेक्ट्स किंवा इतर जटिल वर्तणूक शेअर करण्याचा हा एक शक्तिशाली मार्ग आहे.

कस्टम हुक्सची प्रमुख वैशिष्ट्ये:

• नामांकन पद्धत: कस्टम हुक्सची सुरुवात "use" या शब्दाने झाली पाहिजे. हे रिॲक्टला सूचित करते की फंक्शनमध्ये हुक्स आहेत आणि त्याने हुक्सच्या नियमांचे पालन केले पाहिजे.
• पुन्हा वापरण्याची क्षमता: याचा मुख्य उद्देश पुन्हा वापरता येण्याजोग्या लॉजिकला एकत्रित करणे आहे, ज्यामुळे कंपोनेंट्समध्ये कार्यक्षमता शेअर करणे सोपे होते.
• स्टेटफुल लॉजिक: कस्टम हुक्स useState हुक वापरून स्वतःची स्टेट व्यवस्थापित करू शकतात, ज्यामुळे त्यांना जटिल स्टेटफुल वर्तन एकत्रित करता येते.
• साइड इफेक्ट्स: ते useEffect हुक वापरून साइड इफेक्ट्स देखील करू शकतात, ज्यामुळे बाह्य API, डेटा फेचिंग आणि बरेच काही समाकलित करणे शक्य होते.
• कंपोझेबल (रचनायोग्य): कस्टम हुक्स इतर हुक्सना कॉल करू शकतात, ज्यामुळे तुम्हाला लहान, अधिक केंद्रित हुक्स एकत्र करून जटिल लॉजिक तयार करता येते.

कस्टम हुक्स वापरण्याचे फायदे

कस्टम हुक्स रिॲक्ट डेव्हलपमेंटमध्ये अनेक महत्त्वपूर्ण फायदे देतात:

• कोडचा पुन्हा वापर: सर्वात स्पष्ट फायदा म्हणजे अनेक कंपोनेंट्समध्ये लॉजिक पुन्हा वापरण्याची क्षमता. यामुळे कोडची पुनरावृत्ती कमी होते आणि अधिक DRY (Don't Repeat Yourself) कोडबेसला प्रोत्साहन मिळते.
• सुधारित वाचनीयता: जटिल लॉजिकला स्वतंत्र कस्टम हुक्समध्ये काढून टाकल्याने, तुमचे कंपोनेंट्स अधिक स्वच्छ आणि समजण्यास सोपे होतात. मुख्य कंपोनेंट लॉजिक 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. स्टेट सुरू करा: आम्ही useState वापरून विंडोच्या सुरुवातीच्या रुंदी आणि उंचीसह windowSize स्टेट सुरू करतो.
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

हा हुक API मधून डेटा आणण्यासाठी लागणारे लॉजिक एकत्रित करतो.

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;

निष्कर्ष

कस्टम हुक्स हे अधिक स्वच्छ, पुन्हा वापरण्यायोग्य आणि अधिक देखभाल करण्यायोग्य रिॲक्ट कोड लिहिण्यासाठी एक शक्तिशाली साधन आहे. कस्टम हुक्समध्ये जटिल लॉजिक एकत्रित करून, तुम्ही तुमचे कंपोनेंट्स सोपे करू शकता, कोडची पुनरावृत्ती कमी करू शकता आणि तुमच्या ॲप्लिकेशन्सची एकूण रचना सुधारू शकता. कस्टम हुक्सचा स्वीकार करा आणि अधिक मजबूत आणि स्केलेबल रिॲक्ट ॲप्लिकेशन्स तयार करण्याची त्यांची क्षमता अनलॉक करा.

तुमच्या विद्यमान कोडबेसमध्ये अशी क्षेत्रे ओळखून सुरुवात करा जिथे अनेक कंपोनेंट्समध्ये लॉजिकची पुनरावृत्ती होत आहे. नंतर, ते लॉजिक कस्टम हुक्समध्ये रिफॅक्टर करा. कालांतराने, तुम्ही पुन्हा वापरण्यायोग्य हुक्सची एक लायब्ररी तयार कराल जी तुमची विकास प्रक्रिया वेगवान करेल आणि तुमच्या कोडची गुणवत्ता सुधारेल.

सर्वोत्तम पद्धतींचे अनुसरण करणे, सामान्य चुका टाळणे आणि कस्टम हुक्समधून जास्तीत जास्त फायदा मिळवण्यासाठी प्रगत पॅटर्न्स शोधणे लक्षात ठेवा. सराव आणि अनुभवाने, तुम्ही कस्टम हुक्सचे मास्टर आणि अधिक प्रभावी रिॲक्ट डेव्हलपर व्हाल.