कोडची देखभालक्षमता, चाचणीक्षमता आणि एकूण ॲप्लिकेशन आर्किटेक्चर सुधारण्यासाठी 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;
स्पष्टीकरण:
- स्टेट व्हेरिएबल्स: हुक डेटा, लोडिंग स्टेट आणि एरर स्टेट व्यवस्थापित करण्यासाठी
useState
वापरतो. - useEffect:
useEffect
हुकurl
प्रॉप बदलल्यावर डेटा फेचिंग करतो. - एरर हँडलिंग: फेच ऑपरेशन दरम्यान संभाव्य त्रुटी पकडण्यासाठी हुकमध्ये एरर हँडलिंग समाविष्ट आहे. प्रतिसाद यशस्वी आहे याची खात्री करण्यासाठी स्टेटस कोड तपासला जातो.
- लोडिंग स्टेट: डेटा अजूनही आणला जात आहे की नाही हे दर्शवण्यासाठी
loading
स्टेटचा वापर केला जातो. - ॲबॉर्ट कंट्रोलर: कंपोनेंट अनमाउंट झाल्यास किंवा URL बदलल्यास फेच रिक्वेस्ट रद्द करण्यासाठी ॲबॉर्ट कंट्रोलर API वापरतो. हे मेमरी लीक प्रतिबंधित करते.
- रिटर्न व्हॅल्यू: हुक
data
,loading
आणिerror
स्टेट्स असलेले ऑब्जेक्ट रिटर्न करतो.
कंपोनेंटमध्ये 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;
स्पष्टीकरण:
- कंपोनेंट
useFetch
हुक इम्पोर्ट करतो. - हे API URL सह हुकला कॉल करते.
- हे
data
(users
असे नाव बदललेले),loading
आणिerror
स्टेट्स ॲक्सेस करण्यासाठी रिटर्न केलेल्या ऑब्जेक्टला डिस्ट्रक्चर करते. - हे
loading
आणिerror
स्टेट्सवर आधारित सशर्तपणे वेगवेगळे कंटेंट रेंडर करते. - जर डेटा उपलब्ध असेल, तर ते युजर्सची लिस्ट रेंडर करते.
ॲडव्हान्स्ड कस्टम हुक पॅटर्न्स
साध्या डेटा फेचिंगच्या पलीकडे, कस्टम हुक्सचा वापर अधिक कॉम्प्लेक्स लॉजिक एन्कॅप्स्युलेट करण्यासाठी केला जाऊ शकतो. येथे काही ॲडव्हान्स्ड पॅटर्न्स आहेत:
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;
कस्टम हुक्स लिहिण्यासाठी सर्वोत्तम पद्धती
तुमचे कस्टम हुक्स प्रभावी आणि देखरेख करण्यायोग्य आहेत याची खात्री करण्यासाठी, या सर्वोत्तम पद्धतींचे अनुसरण करा:
- "use" ने सुरू करा: तुमच्या कस्टम हुक्सना नेहमी "use" या प्रीफिक्सने नाव द्या. हे कन्व्हेन्शन React ला सिग्नल देते की फंक्शन हुक्सच्या नियमांचे पालन करते आणि फंक्शनल कंपोनेंट्समध्ये वापरले जाऊ शकते.
- लक्ष केंद्रित ठेवा: प्रत्येक कस्टम हुकचा एक स्पष्ट आणि विशिष्ट उद्देश असावा. जास्त जबाबदाऱ्या हाताळणारे जास्त कॉम्प्लेक्स हुक्स तयार करणे टाळा.
- उपयुक्त व्हॅल्यूज रिटर्न करा: हुक वापरणाऱ्या कंपोनेंटला आवश्यक असलेल्या सर्व व्हॅल्यूज आणि फंक्शन्स असलेले ऑब्जेक्ट रिटर्न करा. यामुळे हुक अधिक लवचिक आणि पुन्हा वापरण्यायोग्य होतो.
- त्रुटी व्यवस्थित हाताळा: तुमच्या कंपोनेंट्समध्ये अनपेक्षित वर्तन टाळण्यासाठी तुमच्या कस्टम हुक्समध्ये एरर हँडलिंग समाविष्ट करा.
- क्लीनअपचा विचार करा: मेमरी लीक टाळण्यासाठी आणि योग्य संसाधन व्यवस्थापन सुनिश्चित करण्यासाठी
useEffect
मध्ये क्लीनअप फंक्शन वापरा. सब्सक्रिप्शन, टाइमर किंवा इव्हेंट लिसनरशी व्यवहार करताना हे विशेषतः महत्वाचे आहे. - चाचण्या लिहा: तुमचे कस्टम हुक्स अपेक्षेप्रमाणे वागतात याची खात्री करण्यासाठी त्यांची स्वतंत्रपणे कसून चाचणी करा.
- तुमच्या हुक्सचे डॉक्युमेंटेशन करा: तुमच्या कस्टम हुक्सचा उद्देश, वापर आणि कोणत्याही संभाव्य मर्यादा स्पष्ट करणारे डॉक्युमेंटेशन प्रदान करा.
जागतिक विचार
जागतिक प्रेक्षकांसाठी ॲप्लिकेशन्स विकसित करताना, खालील गोष्टी लक्षात ठेवा:
- आंतरराष्ट्रीयकरण (i18n) आणि स्थानिककरण (l10n): जर तुमचा कस्टम हुक युजरला दिसणाऱ्या टेक्स्ट किंवा डेटाशी संबंधित असेल, तर तो वेगवेगळ्या भाषा आणि क्षेत्रांसाठी कसा आंतरराष्ट्रीयकृत आणि स्थानिकृत केला जाईल याचा विचार करा. यात
react-intl
किंवाi18next
सारख्या लायब्ररीचा वापर करणे समाविष्ट असू शकते. - दिनांक आणि वेळ फॉरमॅटिंग: जगभरात वापरल्या जाणाऱ्या वेगवेगळ्या दिनांक आणि वेळेच्या फॉरमॅट्सची जाणीव ठेवा. प्रत्येक युजरसाठी तारखा आणि वेळा योग्यरित्या प्रदर्शित केल्या जातील याची खात्री करण्यासाठी योग्य फॉरमॅटिंग फंक्शन्स किंवा लायब्ररी वापरा.
- चलन फॉरमॅटिंग: त्याचप्रमाणे, वेगवेगळ्या क्षेत्रांसाठी चलन फॉरमॅटिंग योग्यरित्या हाताळा.
- ॲक्सेसिबिलिटी (a11y): तुमच्या कस्टम हुक्समुळे तुमच्या ॲप्लिकेशनच्या ॲक्सेसिबिलिटीवर नकारात्मक परिणाम होणार नाही याची खात्री करा. अपंग असलेल्या युजर्सचा विचार करा आणि ॲक्सेसिबिलिटीच्या सर्वोत्तम पद्धतींचे अनुसरण करा.
- परफॉर्मन्स: तुमच्या कस्टम हुक्सच्या संभाव्य परफॉर्मन्स परिणामांबद्दल जागरूक रहा, विशेषत: कॉम्प्लेक्स लॉजिक किंवा मोठ्या डेटासेटशी व्यवहार करताना. वेगवेगळ्या ठिकाणी असलेल्या आणि नेटवर्क स्पीड बदलणाऱ्या युजर्ससाठी तुमचा कोड चांगला परफॉर्म करेल याची खात्री करण्यासाठी तो ऑप्टिमाइझ करा.
उदाहरण: कस्टम हुकसह आंतरराष्ट्रीयीकृत दिनांक फॉरमॅटिंग
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 डेव्हलपमेंट कौशल्ये वाढवा!