M

MLOG

मराठी

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

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

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

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

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

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

कस्टम हुक्स का वापरावे?

कस्टम हुक्स वापरण्याचे अनेक फायदे आहेत:

तुमचे पहिले कस्टम हुक तयार करणे

चला एका व्यावहारिक उदाहरणासह कस्टम हुकची निर्मिती आणि वापर स्पष्ट करू: API मधून डेटा आणणे.

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

कल्पना करा की तुम्हाला तुमच्या React ॲप्लिकेशनमध्ये वेगवेगळ्या 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 हुक वापरणे

आता, React कंपोनेंटमध्ये हा कस्टम हुक कसा वापरायचा ते पाहू:


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 सह कॉन्टेक्स्ट इंटिग्रेशन

कस्टम हुक्सचा वापर React कॉन्टेक्स्टमध्ये ॲक्सेस सुलभ करण्यासाठी देखील केला जाऊ शकतो. तुमच्या कंपोनेंट्समध्ये थेट 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(() => {
    // debouncedSearchValue सह सर्च करा
    console.log('Searching for:', 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;

निष्कर्ष

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