కస్టమ్ hooks లు ఏమిటి మరియు మీరు ఒకటి ఎలా వ్రాస్తారు?

Question

Accepted Answer

**Custom hook** అనేది `use` పేరుతో ప్రారంభమయ్యే ఒక ఫంక్షన్ మరియు ఇతర hooks లను పిలుస్తుంది **stateful logic ను ప్యాకేజీ చేయడానికి మరియు పునర్వినియోగం చేయడానికి** — మీ కాంపోనెంట్ చెట్టును మార్చకుండా (HOCs లేదా render props కాకుండా). ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## ముఖ్యమైన లక్షణాలు - ఇది **Rules of Hooks** ను అనుసరిస్తుంది (టాప్ లెవల్ వద్ద పిలవండి; కాంపోనెంట్‌ల/hooks నుండి మాత్రమే). - **State ప్రతి కాల్కు ఆరంభించబడుతుంది.** `useFetch` ని ఉపయోగించే రెండు కాంపోనెంట్‌లు ఒక్కొక్కటి తమ స్వంత స్వతంత్ర state ను పొందుతాయి — hook ను భాగస్వామ్యం చేయడం డేటా * పంచుకోవడం లేదు. - సంప్రదాయం: దీనిని `useX` గా పేరు పెట్టండి మరియు state + ఫంక్షన్‌లను తిరిగి ఇవ్వండి (తరచుగా ఒక array లేదా object). ## ఇది ఎందుకు ముఖ్యమైనది కస్టమ్ hooks లు ఆధునిక React లో logic ను భాగస్వామ్యం చేయడానికి (డేటా fetching, forms, subscriptions, media queries) ఆదర్శమైన మార్గం, కాంపోనెంట్‌లను చిన్నగా మరియు logic ను ఏకాంతంలో పরీక్ష చేయగల స్థితిలో ఉంచుతుంది.