Que sont les hooks personnalisés et comment en écrivez-vous un ?

Question

Accepted Answer

Un **custom hook** est une fonction dont le nom commence par `use` et qui appelle d'autres hooks pour **empaqueter et réutiliser la logique avec état** — sans changer votre arborescence de composants (contrairement aux HOC 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}

; } ``` ## Propriétés importantes - Il suit les **Règles des Hooks** (appel au niveau supérieur ; uniquement à partir de composants/hooks). - **L'état est isolé par appel.** Deux composants utilisant `useFetch` obtiennent chacun leur propre état indépendant — partager le hook ne signifie pas partager les données. - Convention : nommez-le `useX` et renvoyez l'état + les fonctions (souvent un tableau ou un objet). ## Pourquoi c'est important Les hooks personnalisés sont le moyen idiomatique de partager la logique (récupération de données, formulaires, abonnements, requêtes média) dans React moderne, en gardant les composants petits et la logique testable en isolation.