React et les Hooks

Par iel1, 21 février, 2025
React Image
Comprendre les Hooks en React

Salut à tous, c’est Ismail ! Après avoir exploré les composants, les props, le state et la gestion des événements, il est temps d’aborder un sujet incontournable en React moderne : les Hooks.

Quand j’ai commencé à utiliser React, je voyais souvent des discussions sur les Hooks et leur impact sur le développement. Maintenant que je les ai testés, je comprends pourquoi ils ont révolutionné la façon dont on écrit du code en React.

Pourquoi les Hooks ?

Avec les Hooks, on peut gérer le state et d’autres fonctionnalités React directement dans les composants fonctionnels, rendant le code plus propre et plus facile à lire.

Les Hooks de Base

Voici les trois Hooks fondamentaux que tout développeur React doit connaître :

useState – Gérer l’état local

Le Hook useState permet d’ajouter un state local à un composant fonctionnel.

import { useState } from "react";

const Compteur = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

Ici, useState(0) initialise count à 0 et setCount permet de le modifier.

useEffect – Gérer les effets secondaires

Le Hook useEffect est utilisé pour gérer les effets secondaires comme les appels API, les abonnements ou les modifications du DOM.

import { useState, useEffect } from "react";

const Horloge = () => {
  const [heure, setHeure] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = setInterval(() => {
      setHeure(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(interval); 
  }, []);

  return <p>Heure actuelle : {heure}</p>;
};

L’effet s’exécute après chaque rendu, et le return permet de nettoyer l’intervalle pour éviter les fuites mémoire.

useContext – Simplifier le partage de données

Avec useContext, on peut éviter le "prop drilling" (passer des props à plusieurs niveaux) et accéder directement aux données d’un Contexte React.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

const BoutonThematique = () => {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Thème actuel : {theme}</button>;
};

const App = () => (
  <ThemeContext.Provider value="dark">
    <BoutonThematique />
  </ThemeContext.Provider>
);

Ici, useContext permet au bouton d’accéder directement au contexte du thème sans passer par des props.

Mon Avis sur les Hooks

Après avoir expérimenté les Hooks, voici ce que j’en retiens :

Code plus simple et plus lisible : Plus besoin des composants classes lourds.
Réutilisation facilitée : On peut créer ses propres Hooks personnalisés.
Meilleure organisation : Séparation claire entre logique et affichage.

Si tu débutes avec les Hooks, mon conseil est de bien comprendre useState et useEffect avant d’aller plus loin. Une fois à l’aise, explore useContext, useReducer et d’autres Hooks avancés pour optimiser ton code.

La semaine prochaine, je parlerai de React Router et de la navigation entre les pages.

Source :

Étiquettes

Commentaires