Découverte des Hooks en React : Construire un Mini Pokédex avec useState, useEffect et un Hook personnalisé

Introduction aux Hooks en React

Dans le dernier blog, on a découvert les composants en React et comment les props permettent de passer des données. Aujourd’hui, on va explorer un concept important et très utile qui permet de gérer l’état et les effets dans les applications React : les Hooks.

1. Qu’est-ce qu’un Hook en React ?

Les Hooks sont des fonctions qui permettent d’utiliser l’état et d’autres fonctionnalités de React dans des composants fonctionnel. Avant leur introduction dans la version 16.8, seuls les composants de classe pouvaient gérer un état. Avec les Hooks, les composants fonctionnels sont devenus plus puissants et faciles à écrire.

Voici quelques Hooks assez commun :

• useState : Permet de gérer un état local dans un composant.
• useEffect : Sert à gérer les effets secondaires (comme les appels API ou la mise à jour du DOM).
• useContext : Utilisé pour accéder à un contexte global sans passer de props.
• useRef : Permet d’accéder directement à un élément du DOM.

Nous allons nous concentrer aujourd’hui sur useState et useEffect avec des exemples simples.

2. Utilisation de useState

useState permet d’ajouter un état local à un composant fonctionnel. Voici un exemple simple :

1import React, { useState } from 'react';
2
3function Compteur() {
4  const [compteur, setCompteur] = useState(0);
5
6  return (
7    <div>
8      <p>Valeur du compteur : {compteur}</p>
9      <button onClick={() => setCompteur(compteur + 1)}>Incrémenter</button>
10    </div>
11  );
12}
13
14export default Compteur;

Dans cet exemple :

• useState(0) initialise un état compteur avec la valeur 0.
• setCompteur est une fonction qui met à jour la valeur de compteur.
• Un bouton permet d’incrémenter le compteur à chaque clic.

3. Utilisation de useEffect

useEffect permet d’exécuter du code après le rendu du composant. On l’utilise souvent pour les appels API ou la mise à jour du DOM.

Exemple :

1import React, { useState, useEffect } from 'react';
2
3function Horloge() {
4  const [heure, setHeure] = useState(new Date().toLocaleTimeString());
5
6  useEffect(() => {
7    const interval = setInterval(() => {
8      setHeure(new Date().toLocaleTimeString());
9    }, 1000);
10
11    return () => clearInterval(interval);
12  }, []);
13
14  return <h2>Il est {heure}</h2>;
15}
16
17export default Horloge;

Explication :

• useEffect fait un intervalle qui met à jour l'heure chaque seconde.
• La fonction retournée par useEffect (clearInterval) est exécutée lors du démontage du composant pour pas qu'il roule à l'infinie.
• Le [] le deuxième argument signifie que l’effet s’exécute une seule fois après le premier rendu, on pourrait ajouter un état à écouter pour que l'effet s'execute à chaque changement

4. Création d’un Hook personnalisé : useFetch avec PokeAPI

Les Hooks personnalisés permettent de réutiliser des logiques spécifiques tout en sauvant des lignes de codes. On va créer un Hook useFetch qui récupère des données depuis une API les affiche.

Dans cette exemple, on va utiliser PokeAPI pour faire un mini pokedex.

Création du Hook useFetch.js

1import { useState, useEffect } from 'react';
2
3function useFetch(url) {
4  const [data, setData] = useState(null);
5  const [loading, setLoading] = useState(true);
6  const [error, setError] = useState(null);
7
8  useEffect(() => {
9    fetch(url)
10      .then((response) => response.json())
11      .then((data) => {
12        setData(data);
13        setLoading(false);
14      })
15      .catch((err) => {
16        setError(err);
17        setLoading(false);
18      });
19  }, [url]);
20
21  return { data, loading, error };
22}
23
24export default useFetch;

Utilisation du Hook dans un composant App.js

1import './App.css';
2import { PokemonDetails } from './components/PokemonDetails';
3import useFetch from './hooks/usefetch';
4import { useState } from 'react';
5
6function App() {
7  const [nom, setNom] = useState('');
8  const { data } = useFetch('https://pokeapi.co/api/v2/pokemon/'+nom);
9
10  return (
11    <div className="App">
12      <div className='pokedex-content'>
13          {data && <PokemonDetails data={data} />}
14            <form>
15              <label>Numéro ou nom du pokémon</label>
16              <div className='input-group'>
17                <input onChange={(e) => setNom(e.target.value.toLowerCase())} type='text' placeholder='Chercher un pokémon' />
18              </div>
19            </form>
20          </div>
21      </div>
22    </div>
23  );
24}
25
26export default App;

Ce qui se passe dans PokemonDetails.js

1import React from 'react';
2
3export const PokemonDetails = ({ data }) => {
4  return (
5    <div className="pokemon-details">
6      <div className="pokemonScreen">
7        <img src={data.sprites.versions['generation-v']['black-white'].animated.front_default} alt={data.name} />
8        <h3>{data.name.charAt(0).toUpperCase() + data.name.slice(1)}</h3>
9      </div>
10    </div>
11  );
12}

Aperçu

Résumer de ce qui se passe

1. Le composant App utilise le Hook personnalisé useFetch pour récupérer les données d'un Pokémon depuis l'API PokeAPI.
2. useState est utilisé pour gérer l'état nom, qui représente le nom ou le numéro du Pokémon à rechercher.
3. Lorsqu'un utilisateur tape dans le champ de saisie, l'état nom est mis à jour avec la valeur en minuscules grâce au useState.
4. Les données récupérées sont passées au composant PokemonDetails en tant que props, comme on je l'ai montré la semaine dernière pour afficher les détails du Pokémon.
5. Le composant PokemonDetails reçoit les données du Pokémon en tant que prop.
6. Il affiche une image en format gif du Pokémon et son nom formaté avec la première lettre en majuscule.
7. Les détails sont affichés dans une div avec la classe pokemon-details.

Ressources supplémentaires

Si vous avez des difficultés vous pouvez regarder ou cloner mon Dépôt GitHub pour comprendre.Vous y trouverez le code source complet et des instructions détaillées.

Conclusion

Aujourd’hui, on a appris les Hooks en React, en nous concentrant sur useState et useEffect, et on a vu comment créer un Hook personnalisé pour simplifier la récupération de données. Les Hooks rendent les composants fonctionnels plus puissants et réutilisables.

Dans le prochain blog, on va explorer le routing avec React Router pour naviguer entre différentes pages dans une application React.

Sources

• The Net Ninja. (2020, 30 décembre). Full React Tutorial #8 - Using State (useState hook) YouTube. https://www.youtube.com/watch?v=4pO-HcG2igk&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=8&ab_channel=NetNinjahttps://react.dev

• The Net Ninja. (2021, 6 janvier). Full React Tutorial #14 - useEffect Hook (the basics) YouTube. https://www.youtube.com/watch?v=gv9ugDJ1ynU&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=14&ab_channel=NetNinja

• The Net Ninja. (2021, 12 janvier). Full React Tutorial #20 - Making a Custom Hook YouTube. https://www.youtube.com/watch?v=Jl4q2cccwf0&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=20&ab_channel=NetNinja

• Documentation API de PokeAPI. (s.d.). https://pokeapi.co/docs/v2

• ben4ali. (2025). Mini-Pokedex-react [Dépôt GitHub]. GitHub. https://github.com/ben4ali/Mini-Pokedex-react