Règles des Hooks en React

React a introduit les Hooks dans sa version 16.8 pour permettre aux développeurs d’utiliser l’état et d’autres fonctionnalités de React sans avoir à écrire des classes. Cependant, il y a certaines règles strictes que vous devez suivre lors de l’utilisation des Hooks. Voici ces règles:

1. Ne pas appeler les Hooks à l’intérieur des boucles, des conditions ou des fonctions imbriquées

Il est important de toujours appeler les Hooks au niveau supérieur de vos fonctions de composant ou de vos fonctions personnalisées. Vous ne devez jamais les appeler à l’intérieur des boucles, des conditions ou des fonctions imbriquées. Cela garantit que les Hooks sont appelés dans le même ordre chaque fois qu’un composant est rendu, ce qui permet à React de maintenir correctement l’état entre plusieurs appels de Hooks. Voici deux exemples :

✅ Exemple Valide (Respecte les règles des Hooks)

import { useState, useEffect } from "react";
 
function ValidComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log("Le compteur a changé :", count);
  }, [count]);
 
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

👉 Ici, useState et useEffect sont appelés directement au début de la fonction, garantissant qu’ils s’exécutent dans le même ordre à chaque rendu.

❌ Exemple Invalide (Ne respecte pas les règles des Hooks)

import { useState, useEffect } from "react";
 
function InvalidComponent() {
  const [count, setCount] = useState(0);
 
  if (count > 5) {
    const [otherState, setOtherState] = useState("Erreur"); // ❌ Mauvaise pratique !
  }
 
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

🚨 Problème :

• useState("Erreur") est appelé dans une condition (if (count > 5)).
• Cela casse l’ordre d’exécution des Hooks, car React s’attend à ce que chaque Hook soit toujours appelé dans le même ordre à chaque rendu du composant.

2. Appeler les Hooks uniquement à partir de fonctions de composant ou de fonctions personnalisées

Les Hooks ne peuvent être appelés que depuis des fonctions de composant React ou des fonctions personnalisées. Vous ne pouvez pas les appeler à partir de fonctions JavaScript régulières. De plus, ils ne peuvent pas être appelés à partir de fonctions de classe. Voici deux exemples illustrant cette règle :

✅ Exemple Valide (Les Hooks sont utilisés dans un composant fonctionnel)

import { useState, useEffect } from "react";
 
function ValidComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log("Compteur mis à jour :", count);
  }, [count]);
 
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

✅ Pourquoi c’est valide ?

• useState et useEffect sont appelés dans un composant fonctionnel (ValidComponent).
• React peut gérer correctement l’état et le cycle de vie du composant.

❌ Exemple Invalide (Un Hook est appelé dans une fonction classique)

import { useState } from "react";
 
function badFunction() {
  const [count, setCount] = useState(0); // ❌ ERREUR : useState ne peut pas être utilisé ici
  return count;
}
 
function InvalidComponent() {
  return <p>Valeur : {badFunction()}</p>;
}

🚨 Problème :

• badFunction est une fonction JavaScript classique, pas un composant React.
• Les Hooks ne peuvent être appelés que dans des composants fonctionnels ou des Hooks personnalisés.

✅ Correction avec un Hook personnalisé

Si vous voulez réutiliser la logique d’un Hook, il faut créer un Hook personnalisé (une fonction qui commence par use et utilise des Hooks en interne).

import { useState } from "react";
 
// ✅ Un Hook personnalisé commence par "use"
function useCounter() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}
 
function ValidComponent() {
  const { count, setCount } = useCounter(); // Utilisation du Hook personnalisé
 
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

✅ Pourquoi c’est valide ?

• useCounter est un Hook personnalisé, donc il peut utiliser useState.
• useCounter est appelé dans un composant fonctionnel, ce qui respecte les règles de React.

❌ Exemple Invalide avec une Classe (Les Hooks ne fonctionnent pas dans les classes)

import { useState } from "react";
 
class InvalidClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
 
  render() {
    const [count, setCount] = useState(0); // ❌ ERREUR : Impossible d'utiliser un Hook dans une classe
    return (
      <div>
        <p>Compteur : {count}</p>
        <button onClick={() => setCount(count + 1)}>Incrémenter</button>
      </div>
    );
  }
}

🚨 Problème :

• Les composants de classe utilisent this.state et this.setState(), pas les Hooks.
• useState ne peut pas être utilisé dans une classe.

✅ Correction avec un Composant Fonctionnel

Si vous utilisez React moderne, il est recommandé d’utiliser des composants fonctionnels avec des Hooks à la place des classes :

import { useState } from "react";
 
function ValidComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrémenter</button>
    </div>
  );
}

✅ Pourquoi c’est valide ?

• Utilisation d’un composant fonctionnel au lieu d’une classe.
• useState est utilisé correctement au niveau supérieur du composant.

🚀 Résumé des Règles :

✅ Les Hooks doivent être appelés dans :
✔️ Un composant fonctionnel React (function MonComposant() {})
✔️ Un Hook personnalisé (function useMonHook() {})

❌ Les Hooks NE DOIVENT PAS être appelés dans :
❌ Une fonction JavaScript classique (function badFunction() {})
❌ Une classe React (class MonComposant extends React.Component {})

En suivant ces règles, vous évitez des erreurs et garantissez un bon fonctionnement de votre application React. 🎯

3. Utiliser les Hooks uniquement à partir de packages React

Il est recommandé d’utiliser les Hooks uniquement à partir de packages React. Bien que rien n’empêche techniquement de créer vos propres Hooks, il est généralement préférable d’utiliser ceux fournis par React ou par des bibliothèques tierces fiables.

En suivant ces règles, vous pouvez tirer pleinement parti des Hooks pour simplifier votre code et améliorer la réutilisabilité de vos composants.