Les react hooks ont révolutionné la façon d'écrire des composants React depuis leur introduction en version 16.8. Fini les classes complexes : les hooks permettent d'utiliser l'état et les autres fonctionnalités de React dans des composants fonctionnels simples et lisibles.
Pourquoi adopter react hooks ?
Avant les hooks, tout composant nécessitant un état local devait être écrit sous forme de classe. Cette approche rendait le code verbeux, difficile à tester et à réutiliser. Les hooks résolvent ces problèmes en offrant une API simple et cohérente.
Les avantages sont nombreux : code plus court, logique réutilisable via les hooks personnalisés, meilleure séparation des préoccupations, et compatibilité totale avec les composants existants. La courbe d'apprentissage est rapide pour quiconque connaît déjà JavaScript.
useState : gérer l'état local
Le hook useState est le plus utilisé. Il retourne un tableau avec la valeur actuelle et une fonction pour la mettre à jour :
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: '', email: '' });
Chaque appel à setCount ou setUser déclenche un nouveau rendu du composant. Pour les objets, pensez à utiliser le spread operator pour conserver les propriétés existantes : setUser(prev => ({ ...prev, name: 'Alice' })).
useEffect : gérer les effets de bord
useEffect remplace les méthodes de cycle de vie componentDidMount, componentDidUpdate et componentWillUnmount. Il accepte une fonction et un tableau de dépendances :
useEffect(() => {
document.title = `Compteur : ${count}`;
return () => { /* nettoyage */ };
}, [count]);
Le tableau vide [] signifie que l'effet ne s'exécute qu'au montage. L'absence de tableau fait s'exécuter l'effet à chaque rendu. La fonction retournée sert de nettoyage (cleanup).
useCallback et useMemo pour la performance
Ces deux hooks servent à mémoïser des valeurs et des fonctions pour éviter des recalculs inutiles. useCallback mémoïse une fonction, useMemo mémoïse une valeur calculée :
const handleClick = useCallback(() => {
console.log(count);
}, [count]);
const expensiveValue = useMemo(() => {
return heavyComputation(data);
}, [data]);
Utilisez-les avec parcimonie : la mémoïsation a un coût, et n'est rentable que pour des calculs réellement coûteux ou des fonctions passées à des composants enfants optimisés.
Créer ses propres hooks
Les hooks personnalisés commencent par use et peuvent appeler d'autres hooks. C'est la façon la plus propre de partager de la logique entre composants :
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url).then(r => r.json()).then(d => {
setData(d); setLoading(false);
});
}, [url]);
return { data, loading };
}
Ce hook useFetch peut être réutilisé dans n'importe quel composant qui a besoin de fetcher des données.
useRef, useContext et les autres hooks
useRef permet d'accéder directement à un élément DOM ou de conserver une valeur mutable sans déclencher de rendu. useContext simplifie la consommation d'un contexte React sans prop drilling. useReducer gère des états complexes avec une logique de type Redux.
Pour les applications larges, useContext combiné à useReducer offre une alternative légère à Redux pour la gestion d'état global.
Règles des hooks à respecter
Deux règles fondamentales : n'appelez les hooks qu'au niveau supérieur d'un composant (jamais dans une condition ou une boucle), et n'appelez les hooks que depuis des composants React ou des hooks personnalisés. Le plugin ESLint eslint-plugin-react-hooks vérifie automatiquement ces règles.
Pour approfondir le sujet, la documentation officielle React est une référence incontournable, régulièrement mise à jour avec des exemples interactifs.
Conclusion
Les hooks ont simplifié l'écriture de composants react complexes tout en améliorant la testabilité et la réutilisabilité du code. Maîtriser useState, useEffect et les hooks personnalisés est aujourd'hui indispensable pour tout développeur React sérieux. Commencez par refactoriser un composant existant en hooks : la différence de lisibilité sera immédiate.
