Un Hook est une fonction spéciale introduite dans React 16.8 (2019) qui permet à un composant fonctionnel d’« accéder » (hook into) aux fonctionnalités internes de React :
→ gestion de l’état local (useState),
→ effets de bord (cycle de vie) (useEffect),
→ contexte (useContext),
→ références (useRef), etc.
Caractéristiques fondamentales
| Critère | Détail |
|---|---|
| Objectif | Utiliser l’état et les fonctionnalités React sans classes → code plus lisible, testable et réutilisable |
| Syntaxe | Toujours préfixé par use (ex: useState, useEffect) |
| Règles d’or | Appelés uniquement au niveau racine du composant (pas dans des conditions/boucles) Appelés uniquement dans des composants fonctionnels ou d’autres hooks personnalisés |
| État pur | Chaque appel à un Hook est isolé entre les composants → pas de fuites d’état |
Exemple
import { useState, useEffect } from 'react';
function Compteur() {
// Hook d'état : initialise "count" à 0
const [count, setCount] = useState(0);
// Hook d'effet : exécuté après chaque rendu
useEffect(() => {
document.title = `Clics : ${count}`;
}, [count]); // Dépendance : réexécuté si "count" change
return (
<button onClick={() => setCount(count + 1)}>
Clics : {count}
</button>
);
}Écosystème des Hooks
| Type | Exemples | Usage |
|---|---|---|
| Hooks natifs | useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef | Fonctionnalités cœur de React |
| Hooks personnalisés | useFetch, useLocalStorage, useAuth | Réutilisation de logique métier (ex: const { data } = useFetch(‘/api/users’)) |
| Hooks de bibliothèques | useParams() (React Router), useSelector() (Redux), useQuery() (TanStack Query) | Intégration avec l’écosystème React |
Pourquoi c’est révolutionnaire ?
Réduction de la complexité : Fini le this des classes
Réutilisation de la logique : Extraire du comportement via des hooks personnalisés (ex: useForm)
Meilleure composition : Assembler des fonctionnalités comme des briques légos
Adoption massive : Devenu le standard industriel depuis 2020 (React Router v6, Redux Toolkit, etc. s’appuient dessus)
Citation officielle (React Docs)
« Les Hooks vous permettent de réutiliser la logique d’état sans modifier la structure de votre composant. »
Documentation React