M

MLOG

हिन्दी

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

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

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

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

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

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

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

कस्टम हुक का उपयोग करने के कई फायदे हैं:

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

आइए एक व्यावहारिक उदाहरण के साथ एक कस्टम हुक के निर्माण और उपयोग को दर्शाते हैं: एक API से डेटा फ़ेच करना।

उदाहरण: useFetch - एक डेटा फ़ेचिंग हुक

कल्पना कीजिए कि आपको अपने रीऐक्ट एप्लिकेशन में अलग-अलग API से बार-बार डेटा फ़ेच करने की आवश्यकता है। प्रत्येक कॉम्पोनेंट में फ़ेच लॉजिक को दोहराने के बजाय, आप एक 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(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

स्पष्टीकरण:

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

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


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

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

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

स्पष्टीकरण:

उन्नत कस्टम हुक पैटर्न

सरल डेटा फ़ेचिंग से परे, कस्टम हुक का उपयोग अधिक जटिल लॉजिक को इनकैप्सुलेट करने के लिए किया जा सकता है। यहाँ कुछ उन्नत पैटर्न दिए गए हैं:

1. useReducer के साथ स्टेट मैनेजमेंट

अधिक जटिल स्टेट मैनेजमेंट परिदृश्यों के लिए, आप कस्टम हुक को useReducer के साथ जोड़ सकते हैं। यह आपको स्टेट ट्रांजिशन को अधिक पूर्वानुमानित और संगठित तरीके से प्रबंधित करने की अनुमति देता है।


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

उपयोग:


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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. useContext के साथ संदर्भ एकीकरण

कस्टम हुक का उपयोग रीऐक्ट संदर्भ तक पहुंच को सरल बनाने के लिए भी किया जा सकता है। अपने कॉम्पोनेंट में सीधे useContext का उपयोग करने के बजाय, आप एक कस्टम हुक बना सकते हैं जो संदर्भ पहुंच लॉजिक को इनकैप्सुलेट करता है।


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // यह मानते हुए कि आपके पास एक ThemeContext है

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

उपयोग:


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

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. डिबाउंसिंग और थ्रॉटलिंग

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


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

उपयोग:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // 500ms के लिए डिबाउंस करें

  useEffect(() => {
    // डिबाउंस्डसर्च वैल्यू के साथ खोजें
    console.log('इसके लिए खोज रहे हैं:', debouncedSearchValue);
    // अपनी वास्तविक खोज लॉजिक के साथ console.log बदलें
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

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

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

वैश्विक विचार

वैश्विक दर्शकों के लिए एप्लिकेशन विकसित करते समय, निम्नलिखित बातों को ध्यान में रखें:

उदाहरण: कस्टम हुक के साथ अंतर्राष्ट्रीय दिनांक स्वरूपण


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

उपयोग:


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

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

निष्कर्ष

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