Comprendre les Hooks en React

Bonjour et bienvenue dans mon cinquième blog !Dans le blog précédent, nous avons créé un composant et ajouté du CSS pour le rendre plus esthétique. Aujourd’hui, nous allons parler des hooks en React, de leurs avantages et de la manière de les utiliser efficacement pour construire des applications React modernes et performantes.

Qu’est-ce qu’un hook en React ?

En React, un hook est une fonction spéciale qui permet d’ajouter des fonctionnalités avancées aux composants fonctionnels. Grâce aux hooks, nous pouvons gérer le state et utiliser le cycle de vie du composant sans avoir besoin d’écrire une classe. Avant l’apparition des hooks, il fallait utiliser des classes pour gérer l’état et le cycle de vie d’un composant, ce qui pouvait rendre le code plus complexe et moins lisible, notamment pour les débutants. Les hooks offrent plusieurs avantages comme :

• Ils rendent le code plus lisible, car il n’est plus nécessaire d’écrire des classes avec leurs constructeurs.

• Ils sont réutilisables à travers des hooks personnalisés, ce qui évite la duplication de code.

• Ils permettent une meilleure organisation du code.

Les hooks doivent respecter certaines règles fondamentales pour fonctionner correctement :

1. Il faut toujours les appeler au début d’un composant fonctionnel.
2. Il ne faut pas les mettre dans des boucles ou des conditions.
3. Ils doivent être appelés uniquement dans des composants React ou des hooks personnalisés. Il ne faut pas les utiliser dans des fonctions JavaScript classiques.

Ces règles sont essentielles pour garantir le bon fonctionnement des hooks et éviter des bugs liés à la gestion de l’état.

React propose plusieurs hooks intégrés. Voici les plus importants que vous utiliserez dans presque tous vos projets. Le hook useState qui permet d'ajouter un état local à un composant fonctionnel. Il retourne une valeur d'état et une fonction qui permet de la mettre à jour. Le hook useEffect qui permet d'exécuter du code après le rendu du composant. Il est utilisé pour gérer les effets secondaires, comme :

• Lancer une requête API après le chargement d’un composant.

• Mettre à jour le titre de la page en fonction d’un état.

• Écouter un événement comme le redimensionnement de la fenêtre.

Voici un exemple avec les deux hooks :

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []); 

  return (
    <div>
      <p>Valeur actuelle : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

export default Compteur;

Dans ce code, useState est utilisé pour gérer l’état du compteur count. La valeur initiale est définie à 0 avec useState(0) et elle peut être mise à jour grâce à setCount. Lorsque l’utilisateur clique sur le bouton, setCount(count + 1) il met à jour count en lui ajoutant 1, ce qui déclenche automatiquement un re-rendu du composant avec la nouvelle valeur affichée. En parallèle, useEffect est utilisé pour créer un effet secondaire qui démarre un setInterval dès que le composant est monté. Cet intervalle incrémente count toutes les secondes en appelant setCount(prevCount => prevCount + 1. Grâce à useState et useEffect, ce compteur s’incrémente automatiquement toutes les secondes, tout en permettant à l’utilisateur de modifier manuellement la valeur en cliquant sur le bouton. Pour conclure ,les hooks en React représentent une avancée majeure qui simplifie la gestion de l’état et des effets secondaires dans les composants fonctionnels. Grâce à useState, nous pouvons gérer des états locaux sans avoir besoin de déclarer une classe. Avec useEffect, nous pouvons exécuter des effets secondaires comme les mises à jour automatiques, les appels API ou encore la gestion des événements. Sur ce, je vous dis à la semaine prochaine !!!

Références:

• React. (n.d.). Introducing hooks, using the state hook,Using the Effect Hook, rules of hooks. Legacy React Documentation.De: https://legacy.reactjs.org/docs/hooks-intro.html

• React. (n.d.). Hooks, useEffect, useState. React Developer Documentation.De : https://react.dev/reference/react/hooks