✨ Quick Answer: Kya aap React Custom Hooks seekhna chahte hain? Is step-by-step guide mein jaanein ki reusable logic kaise banayein. Abhi padhein aur master banein!

सोचिए, आप एक बेहतरीन ReactJS प्रोजेक्ट बना रहे हैं। आपको एक Component में API से डेटा फैच (fetch) करना है। आपने useState और useEffect का सेटअप किया। सब बढ़िया चल रहा है! लेकिन तभी आपको दूसरे, तीसरे और चौथे Components में भी वही सेम API fetching लॉजिक, लोडिंग स्टेट (loading state), और एरर हैंडलिंग (error handling) लिखनी पड़ती है। अब आप बार-बार वही कोड कॉपी-पेस्ट कर रहे हैं। क्या यह एक सीनियर डेवलपर का तरीका है? बिल्कुल नहीं!

इसी सिरदर्द को हमेशा के लिए खत्म करने के लिए हम Custom Hooks का इस्तेमाल करते हैं। चलिए आज इस मास्टर-क्लास ट्यूटोरियल में गहराई से समझते हैं कि React me Custom Hooks Kaise Banayein और अपनी कोडिंग लाइफ को कैसे आसान बनाएं।

React me Custom Hooks क्या हैं और इनकी ज़रूरत क्यों है?

दोस्तों, सीधे शब्दों में कहें तो Custom Hooks आपके द्वारा बनाए गए खुद के Hooks होते हैं। React में पहले से ही कुछ Built-in Hooks मिलते हैं जैसे useState, useEffect, useRef, और useContext। जब हम इन बुनियादी Hooks को मिलाकर अपना खुद का एक कस्टमाइज्ड फंक्शन बनाते हैं जो किसी खास प्रॉब्लम को सॉल्व करता है, तो उसे Custom Hook कहा जाता है।

इसकी ज़रूरत क्यों पड़ती है? इसके पीछे 3 मुख्य कारण हैं:

• DRY Principle (Don't Repeat Yourself): आपको एक ही लॉजिक को बार-बार अलग-अलग फाइलों में लिखने की ज़रूरत नहीं पड़ती।
• Clean and Readable Code: आपका कंपोनेंट सिर्फ UI रेंडर करने पर ध्यान देता है, न कि भारी-भरकम कैलकुलेशन या API कॉल्स के लॉजिक पर।
• Easy Maintenance: अगर भविष्य में API fetching के तरीके में कोई बदलाव करना पड़े, तो आपको 10 फाइलों में जाकर कोड नहीं बदलना होगा। आपको सिर्फ अपने Custom Hook में बदलाव करना होगा।

जब आप बड़े स्केलेबल MERN Stack एप्लीकेशन्स बनाते हैं, तब कोड को आर्गेनाइज्ड रखने में Custom Hooks सबसे महत्वपूर्ण भूमिका निभाते हैं।

React Custom Hooks vs Standard React Components में क्या अंतर है?

अक्सर नए डेवलपर्स के मन में यह सवाल आता है कि जब हमारे पास Components हैं, तो फिर Custom Hooks की क्या जरूरत है? चलिए इस टेबल के ज़रिए इनके बुनियादी अंतर को समझते हैं:

React Custom Hooks कैसे काम करते हैं? (Architecture Diagram)

ध्यान देने वाली बात ये है कि Custom Hooks कोई जादुई चीज़ नहीं हैं। ये केवल स्टेटफुल लॉजिक शेयर करते हैं, न कि खुद की स्टेट को। जब भी कोई कंपोनेंट किसी Custom Hook को कॉल करता है, तो उस Hook के अंदर मौजूद सभी States और Effects उस कंपोनेंट के लिए पूरी तरह से इंडिपेंडेंट (स्वतंत्र) होते हैं।

Custom Hooks बनाने के नियम (Rules of Hooks)

इससे पहले कि हम कोड लिखना शुरू करें, आपको Official React Hooks Rules के नियमों को हमेशा ध्यान में रखना चाहिए। अगर आप इन नियमों का पालन नहीं करेंगे, तो React कंपाइलर एरर थ्रो करेगा:

1. "use" उपसर्ग (Prefix): आपके हुक का नाम हमेशा 'use' से शुरू होना चाहिए जैसे useFetch, useAuth, useLocalStorage। अगर आप ऐसा नहीं करते, तो React यह नहीं पहचान पाएगा कि यह एक Hook है, और वह Hooks के नियमों की जांच नहीं कर पाएगा।
2. सिर्फ Top-Level पर कॉल करें: कभी भी Hooks को Loops, Conditions, या Nested Functions के अंदर कॉल न करें। उन्हें हमेशा अपने React फ़ंक्शन के सबसे ऊपर ही कॉल करें।
3. सिर्फ React फ़ंक्शन्स से कॉल करें: Hooks को केवल React Functional Components या किसी अन्य Custom Hook के अंदर से ही कॉल किया जा सकता है। साधारण JavaScript फ़ंक्शन्स से इन्हें कॉल न करें।

Step-by-Step: React में useFetch Custom Hook कैसे बनाएं?

चलिए, अब हाथों को थोड़ा गंदा करते हैं और एक असली, प्रोडक्शन-रेडी (production-ready) useFetch Custom Hook बनाते हैं। यह हुक किसी भी API URL से डेटा फ़ैच करेगा, लोडिंग और एरर स्टेट्स को मैनेज करेगा, और क्लीन-अप (cleanup) भी संभालेगा ताकि मेमोरी लीक न हो।

Step 1: Custom Hook फ़ाइल बनाना

सबसे पहले अपने प्रोजेक्ट के src फ़ोल्डर के अंदर hooks नाम का एक फ़ोल्डर बनाएं। इस फ़ोल्डर में useFetch.js नाम की एक नई फ़ाइल बनाएं और नीचे दिया गया कोड लिखें:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // AbortController का उपयोग API कॉल को कैंसिल करने के लिए किया जाता है अगर कंपोनेंट अनमाउंट हो जाए
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal });
        
        if (!response.ok) {
          throw new Error(`HTTP Error! Status: ${response.status}`);
        }
        
        const result = await response.json();
        setData(result);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // Cleanup फ़ंक्शन
    return () => {
      abortController.abort();
    };
  }, [url]); // जब भी URL बदलेगा, यह इफेक्ट दोबारा चलेगा

  return { data, loading, error };
}

export default useFetch;

कोड को बारीकी से समझें:

• AbortController: यह बहुत महत्वपूर्ण है! मान लीजिए आपका यूजर एक पेज से दूसरे पेज पर तुरंत चला जाता है, तो पुराना अधूरा नेटवर्क रिक्वेस्ट बैकग्राउंड में चलता रहेगा। abortController.abort() उसे तुरंत रोक देता है, जिससे परफॉरमेंस सुधरती है।
• Dependency Array [url]: जब भी कंपोनेंट में URL बदलता है, यह हुक समझ जाता है कि अब नए एंडपॉइंट से डेटा लाना है, और खुद को दोबारा रन करता है।
• Return Object: हम यहाँ से { data, loading, error } भेज रहे हैं ताकि इस्तेमाल करने वाला कंपोनेंट आसानी से इन्हें डीस्ट्रक्चर (destructure) कर सके।

Step 2: अपने Custom Hook को Component में इस्तेमाल करना

अब अपने src/App.js फ़ाइल को खोलें और इस कस्टम हुक का उपयोग करके सर्वर से डेटा रेंडर करें।

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

function App() {
  // JSONPlaceholder API का उपयोग कर रहे हैं
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts/1');

  if (loading) {
    return (
      

        डेटा लोड हो रहा है, कृपया प्रतीक्षा करें...
      
    );
  }

  if (error) {
    return (
      

        त्रुटि: {error}
      
    );
  }

  return (
    

      

        सिंगल पोस्ट विवरण (Post Details)
      
      

        {data?.title}
      
      

        {data?.body}
      
    
  );
}

export default App;

देखा दोस्तों! हमारा App.js कंपोनेंट कितना साफ-सुथरा और सुंदर दिख रहा है। उसे इस बात से कोई फर्क नहीं पड़ता कि API कॉल Axios से हो रही है या Fetch API से। उसे सिर्फ डेटा, लोडिंग और एरर से मतलब है। यह है असली पावर React Custom Hooks की!

एक और व्यावहारिक उदाहरण: useLocalStorage Hook

चलो एक और बेहतरीन उदाहरण देखते हैं। अक्सर हमें यूजर की सेटिंग्स (जैसे Dark Mode या Auth Token) को ब्राउज़र के localStorage में सेव करना पड़ता है। हर बार localStorage.getItem और setItem लिखना काफी थकाऊ होता है। इसके लिए हम एक useLocalStorage Custom Hook बनाएंगे।

Hook का कोड (hooks/useLocalStorage.js):

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("Local Storage से डेटा रीड करने में एरर आई: ", error);
      return initialValue;
    }
  });

  // जब भी storedValue या key बदलेगी, हम लोकल स्टोरेज अपडेट करेंगे
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error("Local Storage में डेटा सेट करने में एरर आई: ", error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

इस Hook का उपयोग करना (App.js):

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

function App() {
  // useLocalStorage का उपयोग बिल्कुल useState की तरह होता है!
  const [theme, setTheme] = useLocalStorage('my-app-theme', 'light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const pageStyle = {
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    transition: 'all 0.3s ease',
    backgroundColor: theme === 'light' ? '#ffffff' : '#0f172a',
    color: theme === 'light' ? '#000000' : '#ffffff',
  };

  return (
    

      
करेंट थीम: {theme.toUpperCase()}
      
        थीम बदलें (Toggle Theme)
      
    
  );
}

export default App;

अब यदि यूजर इस बटन पर क्लिक करके डार्क थीम सेट करता है और पेज को रिफ्रेश करता है, तब भी थीम वैसी ही रहेगी। कितना आसान है ना?

Custom Hooks बनाते समय कौन-सी Common Errors आती हैं और उन्हें कैसे Fix करें?

जब आप पहली बार Custom Hooks बनाएंगे, तो कुछ गलतियां होना बिल्कुल स्वाभाविक है। आइए बात करते हैं उन मुख्य समस्याओं की जो अक्सर डेवलपर्स को परेशान करती हैं, और उनका Error Solving तरीका क्या है:

1. "React Hook 'useMyHook' is called conditionally" एरर

समस्या: जब आप किसी if कंडीशन या लूप के अंदर हुक को डाल देते हैं, तो React की आंतरिक स्टेट इंडेक्स बिगड़ जाती है।

समाधान: हुक को हमेशा फ़ंक्शन की सबसे टॉप लाइन पर कॉल करें। कंडीशन की जांच हुक के *बाद* होनी चाहिए, न कि पहले।

2. Infinite Loop (अनंत लूप) की समस्या

समस्या: अगर आप अपने Custom Hook के अंदर कोई ऑब्जेक्ट या एरे रिटर्न कर रहे हैं और उसे सीधे useEffect की डिपेंडेंसी लिस्ट में रख रहे हैं, तो जावास्क्रिप्ट की "Referential Equality" की वजह से कंपोनेंट बार-बार रेंडर होगा और इनफिनिटी लूप शुरू हो जाएगा।

समाधान: अपने हुक से रिटर्न होने वाले फंक्शन्स को मेमोइज़ करने के लिए useCallback का उपयोग करें और ऑब्जेक्ट्स के लिए useMemo का उपयोग करें।

3. "Sharing State" समझ लेना

समस्या: नए डेवलपर्स को लगता है कि अगर उन्होंने Component A और Component B में एक ही Custom Hook का इस्तेमाल किया है, तो वे दोनों एक ही स्टेट शेयर करेंगे। ऐसा नहीं है!

समाधान: याद रखें, Custom Hooks केवल 'लॉजिक' शेयर करते हैं, 'स्टेट' नहीं। हर कंपोनेंट की अपनी खुद की आइसोलेटेड स्टेट होती है। अगर आपको ग्लोबल स्टेट शेयर करनी है, तो आपको React Context API या Redux का उपयोग करना चाहिए।

Performance Optimization और Best Practices

जब आप प्रोडक्शन लेवल पर बड़े एप्लीकेशन्स के लिए कस्टम हुक डिज़ाइन करते हैं, तो परफॉरमेंस का ख्याल रखना बेहद ज़रूरी होता है:

• Memoization का इस्तेमाल करें: अगर आपका हुक कोई भारी कैलकुलेशन करता है या कोई फ़ंक्शन रिटर्न करता है, तो उसे useMemo और useCallback से रैप करें। इससे अनचाहे री-रेंडर रुकेंगे।
• क्लीनअप (Cleanup) हमेशा लिखें: जब भी आप किसी हुक में इवेंट लिसनर (Event Listener), टाइमर (setTimeout/setInterval) या एपीआई कॉल्स का उपयोग करते हैं, तो सुनिश्चित करें कि useEffect के रिटर्न ब्लॉक में उन्हें क्लियर/कैंसिल कर दिया जाए।
• सिंगल रिस्पॉन्सिबिलिटी (Single Responsibility Principle): एक ही हुक के अंदर पूरी दुनिया का काम न करें। `useFetchAndAuthAndTheme` जैसा हुक न बनाएं। हर हुक का सिर्फ एक काम होना चाहिए।

तो दोस्तों, हमने आज विस्तार से सीखा कि React में Custom Hooks कैसे बनाए जाते हैं, उनके नियम क्या हैं, और बेस्ट प्रैक्टिसेज क्या हैं। अब आपकी बारी है! अपने प्रोजेक्ट्स से डुप्लीकेट कोड को हटाएं और कस्टम हुक्स बनाना शुरू करें। कोडिंग करते रहिए और खुश रहिए!