Cosa sono i custom hooks e come ne scrivi uno?

Question

Accepted Answer

Un **custom hook** è una funzione il cui nome inizia con `use` e che chiama altri hook per **incapsulare e riutilizzare la logica con stato** — senza modificare l'albero dei componenti (a differenza di HOC o 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}

; } ``` ## Proprietà importanti - Segue le **Rules of Hooks** (chiama al livello superiore; solo dai componenti/hook). - **Lo stato è isolato per invocazione.** Due componenti che utilizzano `useFetch` ottengono ciascuno il loro stato indipendente — condividere l'hook *non* condivide i dati. - Convenzione: denominalo `useX` e restituisci stato + funzioni (spesso un array o un oggetto). ## Perché è importante I custom hook sono il modo idiomatico per condividere la logica (recupero dati, moduli, sottoscrizioni, media query) in React moderno, mantenendo i componenti piccoli e la logica testabile in isolamento.