¿Qué son los custom hooks y cómo se escribe uno?

Question

Accepted Answer

Un **custom hook** es una función cuyo nombre comienza con `use` y que llama a otros hooks para **empaquetar y reutilizar lógica con estado**, sin cambiar tu árbol de componentes (a diferencia de los HOCs o los 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}

; } ``` ## Propiedades importantes - Sigue las **Reglas de los Hooks** (se llama en el nivel superior; solo desde componentes o hooks). - **El estado está aislado por cada llamada.** Dos componentes que usan `useFetch` obtienen cada uno su propio estado independiente; compartir el hook *no* comparte los datos. - Convención: nómbralo `useX` y devuelve estado + funciones (a menudo un arreglo o un objeto). ## Por qué es importante Los custom hooks son la forma idiomática de compartir lógica (obtención de datos, formularios, suscripciones, media queries) en el React moderno, manteniendo los componentes pequeños y la lógica fácil de probar de forma aislada.