X'inhuma custom hooks u kif tiktibhom wieħed?

Question

Accepted Answer

A **custom hook** hija funzjoni li l-isem tagħha jibda b' `use` u li tasdaq hooks oħra biex **tippakkja u terġa' tuża l-loġika stateful** — mingħajr ma tbiddel is-siġra tal-component tiegħek (tista' toħloq HOCs jew 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}

; } ``` ## Proprjetajiet importanti - Isegwi r-**Rules of Hooks** (sejjaħ fin-livell ta' fuq; biss minn components/hooks). - **State hija iżolata għal kull sejħa.** Żewg komponenti li jużaw `useFetch` kull waħda tikseb l-istati independenti tagħha stess — il-qsim tal-hook *le* jaqsam id-data. - Konvenzjoni: isemmih `useX` u irrid meta state + functions (ħafna drabi array jew object). ## Għaliex dan importanti Custom hooks hija l-mod idiomatiku biex taqsam il-loġika (naqra ta' data, forom, subscrizioni, mistoqsijat tal-medja) f'React modern, billi żżomm il-komponenti żgħar u l-loġika testa' tiġi ttestjata b'mod iżolat.