Ce sunt custom hooks și cum scrii una?

Question

Accepted Answer

Un **custom hook** este o funcție al cărei nume începe cu `use` și care apelează alte hooks pentru a **empacheta și reutiliza logică cu stare** — fără a schimba arborele tău de componente (spre deosebire de HOCs sau 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ăți importante - Respectă **Rules of Hooks** (apel la nivel superior; doar din componente/hooks). - **Starea este izolată per apel.** Două componente folosind `useFetch` fiecare primește starea sa independentă — partajarea hook-ului *nu* partajează date. - Convenție: numește-o `useX` și returnează stare + funcții (adesea un array sau obiect). ## De ce este important Custom hooks sunt modul idiomativ de a partaja logică (preluarea datelor, formulare, abonamente, media queries) în React modern, ținând componentele mici și logica testabilă în izolare.