Les Hooks Personnalisés

Les hooks personnalisés

Les hooks personnalisés permettent de partager facilement des morceaux de logique entre plusieurs composants. Ils encapsulent des comportements spécifiques souvent absents des hooks intégrés de React. En isolant cette logique, ils améliorent la lisibilité et la maintenabilité du code tout en rendant chaque composant plus autonome. Cette approche modulaire contribue à structurer les applications de manière claire et évolutive, tout en évitant la duplication de code.

Qu'est-ce qu'un hook personnalisé ?

Un hook personnalisé est une fonction JavaScript qui commence par use. Cette convention indique qu’il suit les règles des hooks de React, notamment leur usage uniquement à l’intérieur des composants fonctionnels ou d’autres hooks. En appelant d'autres hooks intégrés, un hook personnalisé encapsule une logique réutilisable et peut gérer son propre état ou ses propres effets. Par exemple, un hook comme useCounter peut encapsuler la logique d’un compteur tout en permettant son utilisation dans plusieurs composants.

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return { count, increment, decrement };
}

Dans cet exemple, le hook useCounter gère un état indépendant pour chaque composant qui l’utilise. Cela permet de réutiliser la logique du compteur sans répéter son implémentation.