Custom hooks के हुन् र तपाईले एक कसे लेख्नुहुन्छ?

Question

Accepted Answer

A **custom hook** एक फंक्शन हो जसको नाम `use` ले सुरु हुन्छ र जसले अन्य hooks लाई कल गर्छ **stateful logic लाई प्याकेज र पुनः प्रयोग गर्न** — आपको component tree लाई परिवर्तन नगरीकन (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** को पालन गर्छ (शीर्ष स्तरमा कल गर्नुहोस्; केवल components/hooks बाट)। - **State प्रत्येक कलको लागि अलग-थलग छ।** `useFetch` प्रयोग गर्ने दुई components ले प्रत्येकले आफ्नो स्वतन्त्र state पाउँछन् — hook साझेदारी गर्नु डेटा साझेदारी गर्दैन। - कन्भेन्शन: यसलाई `useX` नाम दिनुहोस् र state + functions फर्काउनुहोस् (प्राय: array वा object)। ## किन यो महत्त्वपूर्ण छ Custom hooks आधुनिक React मा logic साझेदारी गर्ने (data fetching, forms, subscriptions, media queries) मुहाँ तरिका हो, components लाई सानो राख्दै र logic लाई अलग-अलग परीक्षण योग्य बनाई।