6. Créer un Hook personnalisé

Nous allons voir un exemple théorique pour créer son propre Hook. Nous allons factoriser la logique du composant que nous avons vu précédemment, à savoir :

  • Définir un état contenant un tableau de pokémons, initialement vide.
  • À l’initialisation du composant, remplir le tableau de pokémons.

Ce comportement est exactement celui du composant PokemonsList de notre application. Maintenant, nous allons voir comment nous pourrions factoriser ce comportement dans un Hook personnalisé. Ce que je ferai, c’est créer un fichier pokemons.hooks.ts, placer dans un dossier hooks :

import React, { useState, useEffect } from 'react';
import Pokemon from '../pokemon';
import POKEMONS from '../mock-pokemons';

const usePokemons = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);
 
  useEffect(() => {
    setPokemons(POKEMONS);
  }, []);
 
  return pokemons;
}
 
export default usePokemons;

J’ai créer une nouvelle fonction pour définir mon propre Hook. Le nom de mon Hook commence par « use« , et j’utilise les Hooks useState et useEffect à l’intérieur, à la ligne 6 et 8.

Ensuite à la ligne 12, je retourne mon état pokemons, afin de pouvoir l’utiliser dans d’autres composants, comme nous le verrons juste après.

Comme vous le voyez, le code n’a rien de compliquer, cela paraît même trop simple. En fait, c’est React qui va s’occuper de beaucoup de choses pour nous en arrière plan. Mais de notre côté, nous venons de définir un Hook personnalisé qui est prêt à être intégré au reste de l’application. 😀

Voyons maintenant comment nous pouvons utiliser notre Hook personnalisé depuis un composant React.

Sachez que vous pouvez également passer des paramètres à vos Hooks. Par exemple le Hook usePokemonsWithType(« Feu ») prendrai « Feu » en paramètre, et renverrai tous les pokémons ayant ce type. C’est tout à fait possible, n’hésitez pas à en abuser si jamais l’occasion se présente !