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

1. सभी घटकों में तर्क का पुन: उपयोग करना

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

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

2. जटिल राज्य तर्क का प्रबंधन

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

import { useState } from 'react';

const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return [values, handleChange, resetForm];
};

export default useForm;

3. अमूर्त दुष्प्रभाव

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

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStorage;

कस्टम हुक का महत्व

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

2. चिंताओ का विभाजन
तर्क को घटकों से बाहर और हुक में ले जाकर, आप अपने घटक कोड को साफ़ रख सकते हैं और रेंडरिंग पर अधिक ध्यान केंद्रित कर सकते हैं, जबकि कस्टम हुक तर्क को संभालता है।

3. परीक्षण योग्यता
कस्टम हुक का परीक्षण उन घटकों से स्वतंत्र रूप से किया जा सकता है जो उनका उपयोग करते हैं, जिससे जटिल तर्क के लिए यूनिट परीक्षण लिखना आसान हो जाता है।

3. स्थिरता
कस्टम हुक का उपयोग आपके एप्लिकेशन के विभिन्न हिस्सों में सुसंगत व्यवहार सुनिश्चित करता है, क्योंकि जहां भी हुक लागू किया जाता है, उसी तर्क का उपयोग किया जाता है।

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