Création d'un custom hook : Règles et conventions (`use...`)

Qu'est-ce qu'un Hook personnalisé, techniquement ?

Fondamentalement, un Hook personnalisé n'est rien de plus qu'une fonction JavaScript standard. Il n'y a pas de magie spécifique de React dans sa syntaxe de déclaration. Ce qui le distingue et lui permet de fonctionner comme un Hook, ce sont deux éléments clés : les conventions de nommage et le respect des règles des Hooks lors de son utilisation et de sa définition.

L'idée est d'extraire une logique réutilisable qui fait appel à des Hooks React intégrés (comme useState, useEffect, useContext, etc.) ou à d'autres Hooks personnalisés, et de l'encapsuler dans cette fonction.

Règle n°1 : Le nom DOIT commencer par `use`

C'est la convention la plus importante et elle est obligatoire pour que React et ses outils (notamment le linter ESLint) puissent identifier correctement votre fonction comme étant un Hook.

• Exemples corrects : useFetch, useLocalStorage, useFormInput, useOnlineStatus.
• Exemples incorrects : fetchData, localStorageHandler, formInputLogic.

Pourquoi cette règle est-elle si stricte ? Parce qu'elle permet au linter (eslint-plugin-react-hooks) de vérifier automatiquement si les Règles des Hooks sont respectées à l'intérieur de votre fonction personnalisée et là où elle est appelée. Sans le préfixe `use`, le linter ne saurait pas qu'il doit appliquer ces vérifications spécifiques.

Règle n°2 : Respecter les Règles des Hooks à l'intérieur

Puisque votre Hook personnalisé est destiné à appeler d'autres Hooks, il doit lui-même respecter scrupuleusement les deux Règles fondamentales des Hooks :

1. Appeler les Hooks uniquement au niveau supérieur : N'appelez pas useState, useEffect, ou tout autre hook à l'intérieur de boucles (for, while), de conditions (if, switch), ou de fonctions imbriquées définies à l'intérieur de votre Hook personnalisé. Les appels aux Hooks doivent toujours se faire dans le même ordre à chaque rendu.
2. Appeler les Hooks uniquement depuis des fonctions React : N'appelez pas votre Hook personnalisé depuis des fonctions JavaScript classiques. Appelez-le uniquement depuis :
   • Le corps d'un composant fonctionnel React.
   • Le corps d'un autre Hook personnalisé.

Ces règles sont essentielles pour que React puisse gérer correctement l'état et les effets associés à chaque appel de Hook.

Structure typique d'un Hook personnalisé

Un Hook personnalisé suit généralement cette structure :

1. Définition de la fonction : Nommée avec le préfixe `use`, elle peut accepter des arguments (paramètres d'entrée pour configurer son comportement, comme une valeur initiale, une URL, une clé de stockage, etc.).
2. Appels aux Hooks intégrés/personnalisés : A l'intérieur, appelez les Hooks nécessaires (useState, useEffect, useCallback, etc.) pour implémenter la logique stateful.
3. Logique interne : Implémentez toute autre logique JavaScript nécessaire (fonctions d'aide, calculs...).
4. Valeur de retour : Retournez les informations dont le composant utilisateur aura besoin. Cela peut être une valeur unique, un tableau (comme `useState`), ou un objet (souvent préféré pour retourner plusieurs valeurs ou fonctions avec des noms explicites).

Exemple squelette :

import { useState, useEffect, useCallback } from 'react';

// 1. Définition avec préfixe 'use' et arguments optionnels
function useMaLogiquePersonnalisee(parametreInitial) {
  
  // 2. Appels aux Hooks intégrés (au niveau supérieur)
  const [etatInterne, setEtatInterne] = useState(parametreInitial);
  const [autreEtat, setAutreEtat] = useState(null);

  useEffect(() => {
    // Logique d'effet basée sur etatInterne ou parametreInitial
    console.log('Effet du hook personnalisé');
    // ... setup ...
    return () => {
      // ... cleanup ...
    };
  }, [etatInterne, parametreInitial]);

  // 3. Logique interne (fonctions d'aide, etc.)
  const fonctionUtile = useCallback(() => {
    // Utilise l'état interne ou les paramètres
    setAutreEtat(etatInterne * 2);
  }, [etatInterne]);

  // 4. Valeur de retour (souvent un objet ou un tableau)
  return {
    valeurActuelle: etatInterne,
    autreInfo: autreEtat,
    actionPossible: fonctionUtile,
    mettreAJour: setEtatInterne // Peut exposer la fonction de mise à jour
  };
}

export default useMaLogiquePersonnalisee;

Isolation de l'état

Il est crucial de se rappeler que chaque appel à un Hook personnalisé dans différents composants (ou même plusieurs fois dans le même composant) crée une instance totalement indépendante de l'état et des effets gérés par ce Hook. Ils ne partagent pas d'état entre eux par défaut.

function App() {
  const compteur1 = useCounter(0); // Instance 1 de l'état de useCounter
  const compteur2 = useCounter(100); // Instance 2, totalement séparée

  return (
    

      
Compteur 1: {compteur1.count}
      +1 (Compteur 1)
      
      


      
Compteur 2: {compteur2.count}
      +1 (Compteur 2)
    
  );
}

Incrémenter `compteur1` n'aura aucun effet sur `compteur2`.

Conclusion : Des fonctions réutilisables avec des super-pouvoirs

Créer un Hook personnalisé est un processus simple qui consiste à écrire une fonction JavaScript respectant des conventions de nommage (`use...`) et les règles fondamentales des Hooks. En encapsulant la logique d'état et d'effets dans ces fonctions réutilisables, vous pouvez considérablement simplifier vos composants, améliorer la maintenabilité de votre code et promouvoir une architecture plus modulaire.

Pensez aux Hooks personnalisés comme à des blocs de construction pour la logique stateful, vous permettant de composer des fonctionnalités complexes à partir de pièces plus petites, testables et réutilisables.