Skip to main content

Chapitre 8 : Custom hooks

Custom hook, Règles des hooks

Custom hook​

Un custom hook est une fonction JavaScript qui permet d’extraire et de réutiliser de la logique React basée sur les hooks. Il s’agit d’un moyen de partager du comportement entre plusieurs composants sans dupliquer le code.

Lorsqu’une même logique est utilisée dans plusieurs composants (gestion d’état, appels API, effets), il est recommandé de l’extraire dans un custom hook. Cela permet de garder les composants plus simples et plus lisibles, tout en centralisant la logique dans un seul endroit.

Un custom hook permet à plusieurs composants d’utiliser la même logique tout en conservant leur propre état. Chaque appel du hook est indépendant : les composants ne partagent pas directement les valeurs, mais la logique qui les produit. Cela garantit un comportement prévisible et isolé.

En déplaçant la logique complexe dans des custom hooks, les composants deviennent plus orientés “UI” et plus faciles à lire. Les hooks personnalisés améliorent également l’organisation du projet en séparant clairement la logique métier de l’affichage.

Règle des hooks​

Les custom hooks doivent respecter les mêmes règles que les hooks React. Ils doivent être appelés uniquement au niveau supérieur d’un composant ou d’un autre hook, et jamais à l’intérieur de conditions ou de boucles. De plus, un custom hook doit obligatoirement commencer par le préfixe use afin que React puisse appliquer correctement ses règles.

Questions clés (validation des acquis du chapitre)​

  • Pourquoi utilise-t-on des custom hooks ? Les custom hooks servent à extraire de la logique commune, à éviter la duplication de code et à rendre les composants plus simples, plus lisibles et plus faciles à maintenir.
  • Quelles règles doivent respecter les custom hooks ?
    Un custom hook doit commencer par le préfixe use, être appelé uniquement au niveau supérieur d’un composant ou d’un autre hook, et ne jamais être appelé dans une condition, une boucle ou une fonction imbriquée.
  • En quoi un custom hook améliore-t-il la lisibilité d’un composant ? En déplaçant la logique complexe dans un custom hook, le composant se concentre principalement sur l’affichage, ce qui rend le code plus clair, plus court et plus facile à comprendre.

Liens utiles :
https://devtrium.com/posts/react-typescript-how-to-type-hooks
https://www.joshwcomeau.com/react/usememo-and-usecallback/