రియాక్ట్ కస్టమ్ హుక్స్ని ఉపయోగించి కాంపోనెంట్ లాజిక్ని సంగ్రహించడం, పునర్వినియోగం చేయడం నేర్చుకోండి. ఇది కోడ్ మెయింటైనబిలిటీ, టెస్ట్బిలిటీ, అప్లికేషన్ ఆర్కిటెక్చర్ని మెరుగుపరుస్తుంది.
రియాక్ట్ కస్టమ్ హుక్స్: పునర్వినియోగం కోసం కాంపోనెంట్ లాజిక్ను సంగ్రహించడం
రియాక్ట్ హుక్స్ మనం రియాక్ట్ కాంపోనెంట్స్ను వ్రాసే విధానాన్ని విప్లవాత్మకంగా మార్చాయి, స్టేట్ మరియు సైడ్ ఎఫెక్ట్లను నిర్వహించడానికి మరింత సుందరమైన మరియు సమర్థవంతమైన మార్గాన్ని అందిస్తాయి. అందుబాటులో ఉన్న వివిధ హుక్స్లలో, కస్టమ్ హుక్స్ కాంపోనెంట్ లాజిక్ను సంగ్రహించడానికి మరియు పునర్వినియోగం చేయడానికి ఒక శక్తివంతమైన సాధనంగా నిలుస్తాయి. ఈ వ్యాసం రియాక్ట్ కస్టమ్ హుక్స్ను అర్థం చేసుకోవడానికి మరియు అమలు చేయడానికి సమగ్ర మార్గదర్శిని అందిస్తుంది, మరింత నిర్వహించదగిన, పరీక్షించదగిన మరియు స్కేలబుల్ అప్లికేషన్లను రూపొందించడానికి మీకు శక్తినిస్తుంది.
రియాక్ట్ కస్టమ్ హుక్స్ అంటే ఏమిటి?
సారాంశంలో, కస్టమ్ హుక్ అనేది "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;
వివరణ:
- స్టేట్ వేరియబుల్స్: డేటా, లోడింగ్ స్టేట్ మరియు ఎర్రర్ స్టేట్ను నిర్వహించడానికి హుక్
useState
ను ఉపయోగిస్తుంది. - useEffect:
useEffect
హుక్url
ప్రాప్ మారినప్పుడు డేటా ఫెచింగ్ను చేస్తుంది. - ఎర్రర్ హ్యాండ్లింగ్: ఫెచ్ ఆపరేషన్ సమయంలో సంభావ్య లోపాలను పట్టుకోవడానికి హుక్ ఎర్రర్ హ్యాండ్లింగ్ను కలిగి ఉంటుంది. ప్రతిస్పందన విజయవంతమైందని నిర్ధారించడానికి స్టేటస్ కోడ్ తనిఖీ చేయబడుతుంది.
- లోడింగ్ స్టేట్: డేటా ఇంకా పొందుతున్నదా అని సూచించడానికి
loading
స్టేట్ ఉపయోగించబడుతుంది. - AbortController: కాంపోనెంట్ అన్మౌంట్ అయితే లేదా URL మారితే ఫెచ్ అభ్యర్థనను రద్దు చేయడానికి AbortController APIని ఉపయోగిస్తుంది. ఇది మెమరీ లీక్లను నిరోధిస్తుంది.
- రిటర్న్ విలువ: హుక్
data
,loading
, మరియుerror
స్టేట్లను కలిగి ఉన్న ఒక ఆబ్జెక్ట్ను తిరిగి ఇస్తుంది.
ఒక కాంపోనెంట్లో 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>వినియోగదారులను లోడ్ చేస్తోంది...</p>;
if (error) return <p>లోపం: {error.message}</p>;
if (!users) return <p>వినియోగదారులు కనుగొనబడలేదు.</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}</p>
<button onClick={increment}>ఇంక్రిమెంట్</button>
<button onClick={decrement}>డిక్రిమెంట్</button>
</div>
);
}
export default Counter;
2. useContext
తో కాంటెక్స్ట్ ఇంటిగ్రేషన్
కస్టమ్ హుక్స్ రియాక్ట్ కాంటెక్స్ట్కు యాక్సెస్ను సులభతరం చేయడానికి కూడా ఉపయోగించబడతాయి. మీ కాంపోనెంట్లలో నేరుగా useContext
ను ఉపయోగించడానికి బదులుగా, మీరు కాంటెక్స్ట్ యాక్సెస్ లాజిక్ను ఎన్క్యాప్సులేట్ చేసే కస్టమ్ హుక్ను సృష్టించవచ్చు.
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a 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>ఇది నా కాంపోనెంట్.</p>
<button onClick={toggleTheme}>థీమ్ను టోగుల్ చేయి</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); // Debounce for 500ms
useEffect(() => {
// Perform search with debouncedSearchValue
console.log('దీని కోసం వెతుకుతోంది:', debouncedSearchValue);
// Replace console.log with your actual search logic
}, [debouncedSearchValue]);
const handleChange = (event) => {
setSearchValue(event.target.value);
};
return (
<input
type="text"
value={searchValue}
onChange={handleChange}
placeholder="శోధించు..."
/>
);
}
export default SearchInput;
కస్టమ్ హుక్స్ వ్రాయడానికి ఉత్తమ పద్ధతులు
మీ కస్టమ్ హుక్స్ సమర్థవంతంగా మరియు నిర్వహించదగినవిగా ఉన్నాయని నిర్ధారించుకోవడానికి, ఈ ఉత్తమ పద్ధతులను అనుసరించండి:
- "use"తో ప్రారంభించండి: మీ కస్టమ్ హుక్స్కు ఎల్లప్పుడూ "use" అనే ఉపసర్గతో పేరు పెట్టండి. ఈ సంప్రదాయం రియాక్ట్కు ఫంక్షన్ హుక్స్ నియమాలను అనుసరిస్తుందని మరియు ఫంక్షనల్ కాంపోనెంట్లలో ఉపయోగించవచ్చని సూచిస్తుంది.
- దృష్టి కేంద్రీకరించండి: ప్రతి కస్టమ్ హుక్కు స్పష్టమైన మరియు నిర్దిష్ట ప్రయోజనం ఉండాలి. చాలా బాధ్యతలను నిర్వహించే అతి సంక్లిష్టమైన హుక్స్ను సృష్టించడం మానుకోండి.
- ఉపయోగకరమైన విలువలను తిరిగి ఇవ్వండి: హుక్ను ఉపయోగించే కాంపోనెంట్కు అవసరమైన అన్ని విలువలు మరియు ఫంక్షన్లను కలిగి ఉన్న ఒక ఆబ్జెక్ట్ను తిరిగి ఇవ్వండి. ఇది హుక్ను మరింత సౌకర్యవంతంగా మరియు పునర్వినియోగంగా చేస్తుంది.
- లోపాలను సక్రమంగా నిర్వహించండి: మీ కాంపోనెంట్లలో ఊహించని ప్రవర్తనను నిరోధించడానికి మీ కస్టమ్ హుక్స్లో ఎర్రర్ హ్యాండ్లింగ్ను చేర్చండి.
- క్లీనప్ను పరిగణించండి: మెమరీ లీక్లను నిరోధించడానికి మరియు సరైన వనరుల నిర్వహణను నిర్ధారించడానికి
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('చెల్లని తేదీ');
}
}, [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 తేదీ: {enDate}</p>
<p>ఫ్రెంచ్ తేదీ: {frDate}</p>
<p>జర్మన్ తేదీ: {deDate}</p>
</div>
);
}
export default MyComponent;
ముగింపు
రియాక్ట్ కస్టమ్ హుక్స్ కాంపోనెంట్ లాజిక్ను సంగ్రహించడానికి మరియు పునర్వినియోగం చేయడానికి ఒక శక్తివంతమైన మెకానిజం. కస్టమ్ హుక్స్ను ఉపయోగించడం ద్వారా, మీరు పరిశుభ్రమైన, మరింత నిర్వహించదగిన మరియు పరీక్షించదగిన కోడ్ను వ్రాయవచ్చు. మీరు రియాక్ట్తో మరింత నైపుణ్యం సాధించే కొద్దీ, కస్టమ్ హుక్స్ను మాస్టర్ చేయడం మీ సంక్లిష్ట మరియు స్కేలబుల్ అప్లికేషన్లను రూపొందించే మీ సామర్థ్యాన్ని గణనీయంగా మెరుగుపరుస్తుంది. కస్టమ్ హుక్స్ను అభివృద్ధి చేస్తున్నప్పుడు అవి సమర్థవంతంగా మరియు విభిన్న ప్రేక్షకులకు అందుబాటులో ఉండేలా చూసుకోవడానికి ఉత్తమ పద్ధతులను అనుసరించడం మరియు గ్లోబల్ కారకాలను పరిగణనలోకి తీసుకోవడం గుర్తుంచుకోండి. కస్టమ్ హుక్స్ శక్తిని స్వీకరించండి మరియు మీ రియాక్ట్ అభివృద్ధి నైపుణ్యాలను ఉన్నత స్థాయికి పెంచండి!