ਕਸਟਮ ਹੁੱਕਸ ਕੀ ਹਨ ਅਤੇ ਤੁਸੀਂ ਇੱਕ ਕਿਵੇਂ ਲਿਖਦੇ ਹੋ?

Question

Accepted Answer

ਇੱਕ **custom hook** ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜਿਸਦਾ ਨਾਮ `use` ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਜੋ ਹੋਰ hooks ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ ਤਾਕਿ **stateful ਲਾਜਿਕ ਨੂੰ ਪੈਕ ਕਰੋ ਅਤੇ ਦੁਬਾਰਾ ਵਰਤੋ** — ਤੁਹਾਡੇ ਕਾਰਜ-ਸੂਚੀ ਨੂੰ ਬਦਲੇ ਬਿਨਾਂ (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)। ## ਇਸ ਨੂੰ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Custom hooks ਆਧੁਨਿਕ React ਵਿੱਚ ਲਾਜਿਕ ਸ਼ੇਅਰ ਕਰਨ ਦਾ ਵਿਧੀ ਤਰੀਕਾ ਹਨ (ਡਾਟਾ ਲੁਆ, ਫਾਰਮ, ਸਬਸਕ੍ਰਿਪਸ਼ਨਜ਼, ਮੀਡੀਆ ਕਿਊਰੀਜ਼), ਕਾਂਪੋਨੈਂਟਾਂ ਨੂੰ ਛੋਟਾ ਰੱਖਦੇ ਹਨ ਅਤੇ ਲਾਜਿਕ ਨੂੰ ਅਲੱਗ ਹਿਸਾਬ ਨਾਲ ਪਰਖਯੋਗ ਰੱਖਦੇ ਹਨ।