کسٹم hooks کیا ہیں اور آپ ایک لکھتے ہیں؟

Question

Accepted Answer

**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 ہر کال کے لیے الگ تھلگ ہے۔** دو components جو `useFetch` استعمال کرتے ہیں ہر ایک کو اپنی آزاد state ملتی ہے — hook کو شیئر کرنے سے data *شیئر نہیں* ہوتا۔ - روایت: اسے `useX` کے نام سے رکھیں اور state + functions واپس کریں (اکثر array یا object)۔ ## یہ کیوں اہم ہے کسٹم hooks جدید React میں logic کو شیئر کرنے کا روایتی طریقہ ہے (ڈیٹا حاصل کرنا، فارمز، subscriptions، media queries)، جو components کو چھوٹا رکھتا ہے اور logic کو الگ تھلگ ٹیسٹ کے قابل بناتا ہے۔