Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4.3. Correction : Utiliser le Hook d’effet pour initialiser un composant

Alors, vous avez réussi ? Le plus important de toute façon, c’est d’essayer. C’est déjà une victoire en soi.

Voici ce que j’obtiens de mon côté pour le composant App.tsx, et je vous donne les explications juste après :

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

const App: FunctionComponent = () => {
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);

  useEffect(() => {
    setPokemons(POKEMONS);
  }, []);

  return (
    ...
  );
}

export default App;

La première chose à faire, c’est bien sûr d’importer le Hook d’effet depuis le paquet React. C’est ce l’on fait à la première ligne du composant App.tsx.

Puis, à la ligne 6, on initialise l’état de notre composant avec un tableau vide par défaut.

Ensuite, nous mettons en place le Hook d’effet, qui prend deux arguments :

  • Une fonction, qui appelle la méthode du Hook d’état setPokemons, et on lui passe notre liste de pokémons POKEMONS.
  • Un tableau vide, qui permet d’éviter de déclencher le Hook d’effet à chaque modification de notre composant.

Si vous avez pensé à mettre tous ces éléments en place, félicitations ! Nous n’avons pas modifier beaucoup de code dans ce composant, et pourtant nous avons mis en place beaucoup de choses, grâce aux Hooks d’état et d’effet. La syntaxe est concise mais il ne faut pas s’y tromper, tout ce que nous mettons en place maintenant nous serviras pour toute la suite de nos développements !