React custom hooks-ஐப் பயன்படுத்தி component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வது எப்படி என்பதை அறிக. இது code maintainability, testability, மற்றும் application architecture-ஐ மேம்படுத்துகிறது.
React Custom Hooks: மறுபயன்பாட்டிற்கான Component Logic-ஐப் பிரித்தெடுத்தல்
React hooks, React components-ஐ எழுதும் விதத்தில் புரட்சியை ஏற்படுத்தியுள்ளன. state மற்றும் side effects-ஐ நிர்வகிக்க இவை ஒரு சிறந்த மற்றும் திறமையான வழியை வழங்குகின்றன. பல்வேறு hooks-களில், custom hooks component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வதற்கான சக்திவாய்ந்த கருவியாக தனித்து நிற்கின்றன. இந்தக் கட்டுரை React custom hooks-ஐப் புரிந்துகொள்வதற்கும் செயல்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, மேலும் maintainable, testable, மற்றும் scalable application-களை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கிறது.
React Custom Hooks என்றால் என்ன?
சுருக்கமாக, ஒரு custom hook என்பது "use" எனத் தொடங்கும் ஒரு JavaScript function ஆகும், மேலும் அது மற்ற hooks-ஐ அழைக்கலாம். இது component logic-ஐ reusable functions-க்குள் பிரித்தெடுக்க அனுமதிக்கிறது, இதனால் code duplication-ஐ அகற்றி, ஒரு சுத்தமான component structure-ஐ ஊக்குவிக்கிறது. வழக்கமான React components-களைப் போலன்றி, custom hooks எந்த UI-யையும் render செய்யாது; அவை logic-ஐ encapsulation மட்டுமே செய்கின்றன.
React state மற்றும் lifecycle features-ஐ அணுகக்கூடிய reusable functions-களாக இவற்றை நினைத்துப் பாருங்கள். higher-order components அல்லது render props-க்குச் செல்லாமல், stateful logic-ஐ வெவ்வேறு components-க்கு இடையே பகிர இவை ஒரு அருமையான வழியாகும், இது பெரும்பாலும் படிக்கவும் maintain செய்யவும் கடினமான code-க்கு வழிவகுக்கும்.
Custom Hooks-ஐ ஏன் பயன்படுத்த வேண்டும்?
Custom hooks-ஐப் பயன்படுத்துவதன் நன்மைகள் பல:
- மறுபயன்பாடு: ஒரு முறை logic-ஐ எழுதி, அதை பல components-களில் மறுபயன்பாடு செய்யுங்கள். இது code duplication-ஐ கணிசமாகக் குறைத்து, உங்கள் application-ஐ மிகவும் maintainable ஆக்குகிறது.
- மேம்படுத்தப்பட்ட Code Organization: சிக்கலான logic-ஐ custom hooks-க்குள் பிரித்தெடுப்பது உங்கள் components-ஐ சுத்தமாக்குகிறது, இதனால் அவற்றைப் படிப்பது மற்றும் புரிந்துகொள்வது எளிதாகிறது. Components அவற்றின் முக்கிய rendering பொறுப்புகளில் அதிக கவனம் செலுத்துகின்றன.
- மேம்படுத்தப்பட்ட Testability: Custom hooks-ஐ isolation-ல் எளிதாக test செய்யலாம். ஒரு component-ஐ render செய்யாமல் hook-ன் logic-ஐ நீங்கள் test செய்யலாம், இது மேலும் வலுவான மற்றும் நம்பகமான tests-க்கு வழிவகுக்கிறது.
- அதிகரித்த Maintainability: Logic மாறும்போது, அதை ஒவ்வொரு component-லும் பயன்படுத்தப்படும் ஒவ்வொரு இடத்திலும் புதுப்பிக்க வேண்டியதில்லை – ஒரே ஒரு இடத்தில், custom hook-ல் மட்டும் புதுப்பித்தால் போதும்.
- குறைக்கப்பட்ட Boilerplate: Custom hooks பொதுவான patterns மற்றும் திரும்பத் திரும்ப வரும் பணிகளை encapsulation செய்யலாம், இதனால் உங்கள் components-ல் நீங்கள் எழுத வேண்டிய boilerplate code-ன் அளவைக் குறைக்கிறது.
உங்கள் முதல் Custom Hook-ஐ உருவாக்குதல்
ஒரு practical example-உடன் custom hook-ன் உருவாக்கம் மற்றும் பயன்பாட்டை விளக்குவோம்: API-யிலிருந்து data-வைப் பெறுதல்.
Example: useFetch
- ஒரு Data Fetching Hook
உங்கள் React application-ல் வெவ்வேறு API-களிலிருந்து data-வைப் பெற வேண்டியிருக்கும் என்று கற்பனை செய்து பாருங்கள். ஒவ்வொரு component-லும் fetch logic-ஐ திரும்பத் திரும்பச் செய்வதற்குப் பதிலாக, நீங்கள் ஒரு useFetch
hook-ஐ உருவாக்கலாம்.
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); // முந்தைய பிழைகளை அழித்தல்
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
setError(error);
}
setData(null); // முந்தைய data-வை அழித்தல்
} finally {
setLoading(false);
}
};
fetchData();
return () => {
abortController.abort(); // unmount அல்லது URL மாற்றம் போது fetch-ஐ ரத்து செய்வதற்கான cleanup function
};
}, [url]); // URL மாறும் போது effect-ஐ மீண்டும் இயக்குதல்
return { data, loading, error };
}
export default useFetch;
விளக்கம்:
- State Variables: இந்த hook data, loading state, மற்றும் error state-ஐ நிர்வகிக்க
useState
-ஐப் பயன்படுத்துகிறது. - useEffect:
useEffect
hookurl
prop மாறும் போது data fetching-ஐச் செய்கிறது. - Error Handling: fetch operation-ன் போது ஏற்படக்கூடிய பிழைகளைப் பிடிக்க இந்த hook பிழை கையாளுதலை உள்ளடக்கியுள்ளது. response வெற்றிகரமாக உள்ளதா என்பதை உறுதிப்படுத்த status code சரிபார்க்கப்படுகிறது.
- Loading State: data இன்னும் fetch செய்யப்படுகிறதா என்பதைக் குறிக்க
loading
state பயன்படுத்தப்படுகிறது. - AbortController: component unmount ஆனால் அல்லது URL மாறினால் fetch request-ஐ ரத்து செய்ய AbortController API-ஐப் பயன்படுத்துகிறது. இது memory leaks-ஐத் தடுக்கிறது.
- Return Value: இந்த hook
data
,loading
, மற்றும்error
states-ஐக் கொண்ட ஒரு object-ஐ வழங்குகிறது.
ஒரு Component-ல் useFetch
Hook-ஐப் பயன்படுத்துதல்
இப்போது, இந்த custom hook-ஐ ஒரு React component-ல் எப்படிப் பயன்படுத்துவது என்பதைப் பார்ப்போம்:
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;
விளக்கம்:
- இந்த component
useFetch
hook-ஐ import செய்கிறது. - இது API URL உடன் hook-ஐ அழைக்கிறது.
- இது
data
(users
என மறுபெயரிடப்பட்டுள்ளது),loading
, மற்றும்error
states-ஐ அணுக returning object-ஐ destructure செய்கிறது. - இது
loading
மற்றும்error
states-ஐப் பொறுத்து வெவ்வேறு உள்ளடக்கத்தை conditionally render செய்கிறது. - Data கிடைத்தால், அது users பட்டியலை render செய்கிறது.
Advanced Custom Hook Patterns
எளிய data fetching-க்கு அப்பால், custom hooks-ஐ மேலும் சிக்கலான logic-ஐ encapsulation செய்யப் பயன்படுத்தலாம். இதோ சில advanced patterns:
1. useReducer
உடன் State Management
மேலும் சிக்கலான state management scenarios-க்கு, நீங்கள் custom hooks-ஐ useReducer
உடன் இணைக்கலாம். இது state transitions-ஐ மேலும் predictable மற்றும் organized விதத்தில் நிர்வகிக்க உங்களை அனுமதிக்கிறது.
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;
Usage:
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
உடன் Context Integration
Custom hooks-ஐ React Context-க்கான அணுகலை எளிதாக்கவும் பயன்படுத்தலாம். உங்கள் components-ல் useContext
-ஐ நேரடியாகப் பயன்படுத்துவதற்குப் பதிலாக, context access logic-ஐ encapsulation செய்யும் ஒரு custom hook-ஐ நீங்கள் உருவாக்கலாம்.
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // நீங்கள் ஒரு ThemeContext வைத்திருப்பதாகக் கருதுகிறோம்
function useTheme() {
return useContext(ThemeContext);
}
export default useTheme;
Usage:
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. Debouncing மற்றும் Throttling
Debouncing மற்றும் throttling என்பது ஒரு function execute செய்யப்படும் விகிதத்தைக் கட்டுப்படுத்தப் பயன்படுத்தப்படும் நுட்பங்கள். custom hooks-ஐ இந்த logic-ஐ encapsulation செய்யப் பயன்படுத்தலாம், இதனால் event handlers-க்கு இந்த நுட்பங்களைப் பயன்படுத்துவது எளிதாகிறது.
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;
Usage:
import React, { useState } from 'react';
import useDebounce from './useDebounce';
function SearchInput() {
const [searchValue, setSearchValue] = useState('');
const debouncedSearchValue = useDebounce(searchValue, 500); // 500ms-க்கு Debounce செய்யவும்
useEffect(() => {
// debouncedSearchValue உடன் search செய்யவும்
console.log('Searching for:', debouncedSearchValue);
// console.log-ஐ உங்கள் உண்மையான search logic-ஆல் மாற்றவும்
}, [debouncedSearchValue]);
const handleChange = (event) => {
setSearchValue(event.target.value);
};
return (
<input
type="text"
value={searchValue}
onChange={handleChange}
placeholder="Search..."
/>
);
}
export default SearchInput;
Custom Hooks எழுதும் சிறந்த நடைமுறைகள்
உங்கள் custom hooks பயனுள்ளதாகவும் maintainable ஆகவும் இருப்பதை உறுதிசெய்ய, இந்தப் சிறந்த நடைமுறைகளைப் பின்பற்றவும்:
- "use" உடன் தொடங்குங்கள்: உங்கள் custom hooks-ஐ எப்போதும் "use" என்ற முன்னொட்டுடன் பெயரிடுங்கள். இந்த convention, function hooks-ன் விதிகளைப் பின்பற்றுகிறது என்பதையும், functional components-ல் பயன்படுத்தப்படலாம் என்பதையும் React-க்கு சிக்னல் செய்கிறது.
- Focused-ஆக வைத்திருங்கள்: ஒவ்வொரு custom hook-க்கும் ஒரு தெளிவான மற்றும் குறிப்பிட்ட நோக்கம் இருக்க வேண்டும். அதிகப்படியான பொறுப்புகளைக் கையாளும் மிகவும் சிக்கலான hooks-ஐ உருவாக்குவதைத் தவிர்க்கவும்.
- பயனுள்ள மதிப்புகளை வழங்கவும்: hook-ஐப் பயன்படுத்தும் component-க்குத் தேவையான அனைத்து மதிப்புகள் மற்றும் functions-ஐக் கொண்ட ஒரு object-ஐ வழங்கவும். இது hook-ஐ மேலும் flexible மற்றும் reusable ஆக்குகிறது.
- பிழைகளைgracefully கையாளுங்கள்: உங்கள் components-ல் எதிர்பாராத நடத்தையைத் தடுக்க உங்கள் custom hooks-ல் பிழை கையாளுதலைச் சேர்க்கவும்.
- Cleanup-ஐக் கவனியுங்கள்: memory leaks-ஐத் தடுக்கவும், சரியான resource management-ஐ உறுதிப்படுத்தவும்
useEffect
-ல் cleanup function-ஐப் பயன்படுத்தவும். subscriptions, timers, அல்லது event listeners-ஐக் கையாளும் போது இது குறிப்பாக முக்கியமானது. - Tests எழுதுங்கள்: அவை எதிர்பார்த்தபடி செயல்படுவதை உறுதிசெய்ய உங்கள் custom hooks-ஐ isolation-ல் முழுமையாக test செய்யுங்கள்.
- உங்கள் Hooks-ஐ Document செய்யுங்கள்: உங்கள் custom hooks-க்குத் தெளிவான documentation-ஐ வழங்கவும், அவற்றின் நோக்கம், பயன்பாடு மற்றும் ஏதேனும் சாத்தியமான வரம்புகளை விளக்கலாம்.
Global Considerations
உலகளாவிய பார்வையாளர்களுக்கான application-களை உருவாக்கும்போது, பின்வருவனவற்றைக் கவனத்தில் கொள்ளுங்கள்:
- Internationalization (i18n) மற்றும் Localization (l10n): உங்கள் custom hook பயனர் எதிர்கொள்ளும் text அல்லது data-வைக் கையாண்டால், அது வெவ்வேறு மொழிகள் மற்றும் பகுதிகளுக்கு எப்படி internationalized மற்றும் localized செய்யப்படும் என்பதைக் கருத்தில் கொள்ளுங்கள். இதற்கு
react-intl
அல்லதுi18next
போன்ற ஒரு library-ஐப் பயன்படுத்த வேண்டியிருக்கும். - Date மற்றும் Time Formatting: உலகம் முழுவதும் பயன்படுத்தப்படும் வெவ்வேறு date மற்றும் time formats-ஐப் பற்றி கவனமாக இருங்கள். ஒவ்வொரு பயனருக்கும் dates மற்றும் times சரியாகக் காண்பிக்கப்படுவதை உறுதிசெய்ய பொருத்தமான formatting functions அல்லது libraries-ஐப் பயன்படுத்தவும்.
- Currency Formatting: இதேபோல், வெவ்வேறு பகுதிகளுக்கு currency formatting-ஐ முறையாகக் கையாளவும்.
- Accessibility (a11y): உங்கள் custom hooks உங்கள் application-ன் accessibility-யை எதிர்மறையாக பாதிக்காது என்பதை உறுதிப்படுத்தவும். மாற்றுத்திறனாளிகளான பயனர்களைக் கருத்தில் கொண்டு accessibility சிறந்த நடைமுறைகளைப் பின்பற்றவும்.
- Performance: உங்கள் custom hooks-ன் சாத்தியமான performance implications-ஐ அறிந்திருங்கள், குறிப்பாக சிக்கலான logic அல்லது பெரிய datasets-ஐக் கையாளும் போது. வெவ்வேறு இடங்களில் மாறுபட்ட network speeds கொண்ட பயனர்களுக்கு அவை நன்றாக செயல்படுவதை உறுதிசெய்ய உங்கள் code-ஐ optimize செய்யவும்.
Example: ஒரு Custom Hook உடன் Internationalized Date Formatting
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;
Usage:
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;
Conclusion
React custom hooks, component logic-ஐப் பிரித்தெடுத்து மறுபயன்பாடு செய்வதற்கான ஒரு சக்திவாய்ந்த வழிமுறையாகும். custom hooks-ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் சுத்தமான, மேலும் maintainable, மற்றும் testable code-ஐ எழுதலாம். React-ல் நீங்கள் மேலும் திறமைசாலியாக ஆகும்போது, custom hooks-ஐ மாஸ்டரிங் செய்வது சிக்கலான மற்றும் scalable application-களை உருவாக்கும் உங்கள் திறனை கணிசமாக மேம்படுத்தும். சிறந்த நடைமுறைகளைப் பின்பற்றவும், global factors-ஐக் கருத்தில் கொள்ளவும், இதனால் அவை பல்வேறு பார்வையாளர்களுக்கு பயனுள்ளதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும். custom hooks-ன் சக்தியை ஏற்றுக்கொண்டு உங்கள் React development திறன்களை மேம்படுத்திக் கொள்ளுங்கள்!