7. Utiliser un Hook personnalisé

Maintenant que nous avons définis un magnifique Hook nommé usePokemons, nous allons appliquer la logique de ce Hook à notre composant précédent que voici :

// Les importations...

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

En appliquant notre Hook usePokemons à ce composant, on obtiens ceci :

// Les autres importations...
import { usePokemons } from '../hooks/usePokemons';

const PokemonsList: FunctionComponent = () => {
  const pokemons = usePokemons();
  
  return ( ... );
}
  
export default App;

À la ligne 5, on applique notre Hook personnalisé. Celui-ci renvoie l’état des pokémons, que nous récupérons dans la variable pokemons. En une seule ligne de code, on a mis en place un état, définit un type pour cet état, ainsi qu’une méthode de cycle de vie pour les effets du composant. Ce code est absolument équivalent au comportement de départ, simplement il est mieux découpé. C’est même difficile d’être plus concis et efficace au niveau de la syntaxe. 😎

Heu… mais si deux composants utilise ce Hook, il vont avoir le même état concernant les pokémons. Les états seront reliés entre eux ?

Non, et c’est bien la puissance des Hooks. Chaque composant aura son propre état, les Hooks personnalisés ne sont là que pour factoriser la logique des composants. L’état et les effets de chaque composant sont totalement isolés les uns des autres. Merci React !

Nous savons désormais développer nos propres Hooks, et les possibilités qui s’offrent à nous deviennent de plus en plus nombreuses. 🔥