5. Présentation des Hooks personnalisés

Jusqu’à maintenant, ce que nous avons fait n’était pas vraiment lié aux Hooks. Nous avons simplement extrait la logique d’un composant sous la forme d’une fonction, dans un fichier à part. Cette façon de faire convient tout à fait pour des cas simples.

Le problème qui se pose, c’est si vous avez plusieurs composants qui ont le même fonctionnement au niveau de leur état et de leur cycle de vie. Autrement dit, comment factoriser des Hooks communs à plusieurs composants, comme useState ou useEffect par exemple ?

En effet, si vous vous rappelez bien les règles d’or sur Hooks, vous ne pouvez les appeler que depuis des composants React. Et bien, je ne vous ai dit qu’une demi-vérité (ou un demi mensonge 🙄), car vous pouvez également les appeler depuis un Hook personnalisé.

C’est quoi un Hook personnalisé ?

Un Hook personnalisé est une fonction JavaScript dont le nom commence par ”use” et qui peut appeler d’autres Hooks.

Ce n’est pas plus compliqué que ça en soit, par contre chaque mot de la définition est important, notamment le fait que vos Hooks doivent tous commencer par « use« . Attention aux erreurs d’inattentions à ce sujet.

Cela ressemble donc beaucoup à ce qu’on vient de faire, mais maintenant nous avons la possibilité de factoriser plus de comportements. Prenons le composant suivant :

// Les importations...
 
const PokemonsList: FunctionComponent = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);
 
  useEffect(() => {
    setPokemons(POKEMONS);
  }, []);
 
  return ( ... );
}
 
export default App;

Dans ce composant, j’initialise un état nommé pokemon, et j’ai ajouté un effet pour ajouter plusieurs pokémons à l’initialisation du composant. Nous avons déjà vu cela, je ne reviens pas dessus. Par contre, comment faire si plusieurs composants ont un état avec une liste des pokémons au démarrage ? Est-ce qu’il faudrait définir le même état et le même effet dans tous ces composants ?

Et bien non, à la place nous allons factoriser l’état et les effets de ce composants dans un Hook personnalisé. 👍

Je ne comprend pas… quand est-ce qu’il faut utiliser un Hook personnalisé, ou une simple fonction ?

Et bien, si vous avez besoin de factoriser les Hooks d’un composant (état, cycle de vie), vous devez passer par un Hook personnalisé. Vous n’avez pas le choix car les Hooks ne peuvent pas être utilisé dans une simple fonction JavaScript. Par contre, si vous factoriser un comportement qui peut se résumer à une fonction quelconque, alors vous pouvez faire comme nous avons fait précédemment.

Jusqu’à la fin de ce chapitre, je vais vous présenter théoriquement le fonctionnement Hooks personnalisés, pour que vous sachiez comment cela fonctionne et comment les utiliser. Par contre, nous allons conserver nos deux fonctions précédentes, car nous n’avons tout simplement pas besoin de créer des Hooks personnalisés pour les besoins de notre application.