O que são custom hooks e como você escreve um?

Question

Accepted Answer

Um **custom hook** é uma função cujo nome começa com `use` e que chama outros hooks para **encapsular e reutilizar lógica com estado** — sem alterar sua árvore de componentes (ao contrário de HOCs ou 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}

; } ``` ## Propriedades importantes - Segue as **Rules of Hooks** (chamada no nível superior; apenas de componentes/hooks). - **O estado é isolado por chamada.** Dois componentes usando `useFetch` cada um obtém seu próprio estado independente — compartilhar o hook *não* compartilha dados. - Convenção: nomeie como `useX` e retorne estado + funções (geralmente um array ou objeto). ## Por que isso importa Custom hooks são a forma idiomática de compartilhar lógica (busca de dados, formulários, subscrições, media queries) no React moderno, mantendo componentes pequenos e a lógica testável isoladamente.